html - child 高度 100% 没有设置 parent 固定高度

Question

我有一个容器 div，它包含 2 个 child divs:第一个紧贴他父亲的左边框，包含一个按钮列表，而第二个包含内容。长话短说，它的工作方式类似于选项卡导航器，按钮位于左侧。

我遇到的问题是按钮容器高度，我希望它是他父级 div 的 100%。我不想给容器div一个固定的高度，因为我想让容器根据他的内容高度相应变化..

正如您在下面的 fiddle 中看到的，ul 右边框没有接触到容器底部边缘。

这是一些代码

HTML

<div id="container">
    <div id="buttons">
        <ul>
            <li><a href="#">button 1</a></li>
            <li><a href="#">button 2</a></li>
            <li><a href="#">button 3</a></li>
            <li><a href="#">button 4</a></li>
        </ul>
    </div>
    <div id="content">
        asdasdasdasdas<br>
        ...
        asdasdasdasdas<br>                       
    </div>
</div>

CSS

#buttons{
    background: lightgray;
    width: 150px;
    float: left;
    border-right: 1px solid black;
    height: 100%
}
#content{
    padding: 15px;
    float: left;
}
#container{
    /*-- adding fixed height here, works*/
    /*height: 300px;*/
    display: inline-block;
    border-left: 1px solid black;
}

fiddle

• 我目前所做的 --> http://jsfiddle.net/BeNdErR/kVcds/

• 我想要实现的结果，没有固定高度 --> http://jsfiddle.net/BeNdErR/kVcds/2/

• 我想介绍的另一个案例:内容比按钮 div 短 --> http://jsfiddle.net/BeNdErR/kVcds/8/

对这个问题有什么想法或解决方案吗？

提前致谢，致以最诚挚的问候

Answer 1

您可以通过在父级中使用绝对定位 #buttons div 来做到这一点。

为此，首先在父级上声明相对定位

#container {
    position:relative;
    min-height:200px;/* if you can reliably set a minimum height */
}

#buttons {
    position:absolute;
    height:100%;
    width:150px;
}

#content {
    margin-left:150px;
}

因为绝对定位的按钮元素现在不在页面流中，您可以向#content div 添加一个等于#buttons div 宽度的边距，这样它仍然在正确的位置。

查看更新后的 fiddle :

http://jsfiddle.net/kVcds/3/