Question

我在为学校项目工作时遇到了问题，我们正在做的是创建div部分。在每个div部分中，我对它们进行了颜色编码，以使它们更加清晰。虽然在我的leftnav div中它不会分支到页脚的底部。 JSFIDDLE here- http://jsfiddle.net/rM8zw/

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

我想弄清楚为什么我的#leftnav不能完成我身体的高度，所以它是均匀的。

继承人的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。这就是为什么height的{{1}}仅为#leftnav。 900px会覆盖min-height。此外，如果您将height移出并保留min-height，则您对height: auto没有任何限制，因此height的{{1}}成为height {1}}其内容。在这种情况下，这是leftnav。

您可以通过几种方式设置其height。最简单的一点是，因为您明确地在右侧的所有元素上设置了高度，所以将它们添加起来，然后将结果值显式设置为0的{{1}}。

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

1。实际上将height的{{1}}设置为其父级leftnav（height）。您可以将其height设置为#leftnav（并且不要忘记在父级上设置height）并将其顶部，左侧，底部值设置为0.在这种情况下，您可以还必须将其父级#bodycontainer（position）设置为与absolute的{{1}}（此处为position: relative）相同的值。或者在其兄弟padding-left）上设置#bodycontainer，以避免修改#leftnav的{{1}}或将box-sizing设置为width。 - DEMO

2。让它看起来像200px一样。

a）简单的方法。使用带有色卡的gradient作为父级的left-margin: 200px;（#bodyline） - DEMO // demo without redundant code

width

记住两件事：

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

（请参阅caniuse.com了解更多详情）

b）最佳兼容性方法（适用于IE8 +）。在父级#bodycontainer上使用pseudo-element，绝对定位，将其border-box，height和background值设置为#bodycontainer，然后给它background: linear-gradient(left, #FF00FF 200px, transparent 200px);的{{1}}和期望的#bodycontainer。 - DEMO // demo without redundant code

top

Answer 2

使用display：table-cell并删除float标记。

    #leftnav{
     display:table-cell;
     width:200px;
     height:inherit;
     min-height:inherit;
     height:auto !important;
     background:#FF00FF;
     padding:0;
     overflow:hidden;
      }
    #bodyline{
    display:table-cell;
    width:780px;
    height:800px;
    min-height:800px;
    height:auto !important;
    background:#00FF40;
    overflow:hidden;
}

div高度位置不起作用

2 个答案: