html - 孩子身高 100% 没有设置父母固定高度

Question

我有一个div包含 2 个孩子的容器divs：第一个，坚持他父亲的左边框，包含按钮列表，而第二个包含内容。长话短说，它就像一个标签导航器，左边有按钮。

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

正如您在下面的小提琴中看到的那样，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;
}

小提琴

• 我目前所做的-> 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 宽度的边距，以便它仍然在正确的位置。

查看更新的小提琴：

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

Answer 2

您可能想参考此链接。它可能会为您提供您想要的东西，但它并不像您可能想要的那么简单。

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

希望这可以帮助！