0

我在为学校做一个项目时遇到问题，我们正在做的是创建 div 部分。在每个 div 部分中，我对它们进行了颜色编码，以便更清楚地看到它们。虽然在我的 leftnav div 中，它不会分支到底部到页脚。JSFIDDLE 在这里- 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>

希望这会好一点。

4

2 回答 2

2

如果您设置min-heightas inherit，那么它将上升，直到找到一个值。在这种情况下，最多#container，它设置为900px。这就是为什么 the heightof your #leftnavis only 900px。min-height覆盖height. 此外，如果您min-height取出并保留height: auto，那么您对 ​​没有任何限制height，因此height您的leftnav成为height其内容的 。0在这种情况下。

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

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

1.实际上将height你#leftnav的设置height为它的父级（#bodycontainer）。您可以通过将其设置position为absolute（并且不要忘记position: relative在父级上设置）并将其顶部、左侧、底部值设置为 0 来做到这一点。在这种情况下，您还必须将padding-left其父级 ( #bodycontainer) 设置为相同#leftnav的值width（200px这里）。或设置left-margin: 200px;其兄弟 ( #bodyline) 以避免必须修改widthof#bodycontainer或将其设置box-sizing为border-box。-演示

2.让它看起来像它一样height。

a)简单的方法。使用gradient带有颜色停止background的父级 ( #bodycontainer) - DEMO //没有冗余代码的演示

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

请记住两件事：

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

（有关更多详细信息，请参见caniuse.com）

b)最佳兼容性方法（适用于 IE8+）。在父元素上使用伪元素#bodycontainer，将其绝对定位，将其top和left值bottom设置为0，给它#leftnav'swidth和所需的background。- DEMO //没有多余代码的演示

#bodycontainer:before {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 200px;
    background: #f0f;
    content:'';
}
于 2012-08-20T04:22:57.657 回答
0

使用 display:table-cell 并删除浮动标签。

    #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;
}
于 2012-08-20T06:19:15.477 回答