css - div高度位置不起作用

Question

我在处理学校元素时遇到问题，我们正在做的是创建 div 部分。在每个 div 部分中，我对它们进行了颜色编码，以便更清楚地看到它们。虽然在我的 leftnav div 中它不会分支到底部到页脚。 JSFIDDLE 在这里- http://jsfiddle.net/rM8zw/

是否有人可以帮我解决这个问题并解释我做错了什么？我有三个容器 div，因此我的一些继承物可以正常工作。 leftnav 和 bodyline 的容器，主站点的容器，BmiddleLeft 和 Right 的容器。提前谢谢你。

我想弄清楚为什么我的#leftnav 不能完全达到我的 body 线条的高度，所以它是均匀的。

这是 CSS-

#container{
    width:980px;
    height:auto !important;
    height:900px;
    min-height:900px;
    padding-top:20px;
    padding-bottom:20px;
    margin: 0 auto; 
    boder: solid 0px;
    overflow:hidden;
}
#holder{
    width:980px;
    height:auto !important;
    height: 800px;
    min-height:800px;
    padding:0;
    margin:0 auto; 
    border: solid 0px;
    overflow:hidden;
    background:#FFF;
}
#header{
    width:980px;
    height:100px;
    border:solid 0px;
    margin:0 auto;
    padding:0;
    background:#FF0000;
}
#navbar{
    width:980px;
    height:40px;
    border:solid 0px;
    margin:0 auto;
    padding:0;
    background:#c0c0c0;
}
#bodycontainer{
     width:980px;
     height:800px;
     min-height:800px;
     height:auto !important;
     overflow:hidden;
}
#leftnav{
     float:left;
     width:200px;
     height:1200px;
     min-height:1200px;
     height:auto !important;
     padding:0;
     overflow:hidden;
}
#bodyline{
     float:right;
     width:780px;
     height:800px;
     min-height:800px;
     height:auto !important;
     background:#00FF40;
     overflow:hidden;
}

这是我目前使用的 HTML-

<div id="container">
    <div id="holder">
    <div id="header">
    </div>
    <div id="navbar">
    </div>
    <div id="bodycontainer">
        <div id="leftnav">
        </div>
        <div id="bodyline">
            <div id="Btop">
            </div>
            <div id="BmiddleCont">
                <div id="BmiddleLeft">
                hello
                <br />
                </div>
                <div id="BmiddleRight">
                </div>
            </div>
            <div id="Bbottom">
            </div>
            <div id="BbottomLast">
            </div>
            </div>
        </div>
    </div>
    <div id="footer">
    </div>
</div>

希望这会好一点。

Answer 1

如果您将 min-height 设置为 inherit，那么它将一直上升直到找到一个值。在这种情况下，直到 #container，它已设置为 900px。这就是为什么您的 #leftnav 的 height 仅为 900px 的原因。 min-height 覆盖 height。此外，如果你去掉 min-height 并保留 height: auto，那么你就没有对 height 施加任何限制，所以 leftnav 的 >height 成为其内容的 height。在本例中为 0。

有几种方法可以设置它的高度。最简单的方法是，因为您明确设置了右侧所有元素的高度，所以将它们相加，然后将结果值明确设置为 leftnav< 的 height/.

如果这些值只是虚拟值并且右侧元素的高度将取决于其中内容的高度，那么您有几个选择:

1. 实际上将 #leftnav 的 height 设置为其父级的 height(#bodycontainer).您可以通过将其 position 设置为 absolute (并且不要忘记在父级上设置 position: relative )及其顶部，左侧来实现，底部值为 0。在这种情况下，您还必须将其父级 (#bodycontainer) 的 padding-left 设置为与 相同的值#leftnav 的 width(此处为 200px)。或在其兄弟 (#bodyline) 上设置 left-margin: 200px; 以避免必须修改 #bodycontainer< 的 width/code> 或设置其 box-sizing到 边框框。 - DEMO

2. 使其看起来具有相同的高度。

a) 简单的方法。使用gradient将色标作为父级的 背景 (#bodycontainer) - DEMO//demo without redundant code

background: linear-gradient(left, #FF00FF 200px, transparent 200px);

请记住两点:

• 一个，你必须添加前缀，因为渐变还不支持无前缀
• 第二，这在 IE9 或更早版本中不起作用

(有关详细信息，请参阅 caniuse.com)

b) 最好的兼容方法(适用于IE8+)。使用pseudo-element在父级 #bodycontainer 上，将其绝对定位，将其 top、left 和 bottom 值设置为 0，给它 #leftnav 的 width 和想要的 background。 - DEMO//demo without redundant code

#bodycontainer:before {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 200px;
    background: #f0f;
    content:'';
}