Question

我有一个容器div，其中包含2个孩子divs：第一个容器，贴在父亲的左边框上，包含一个按钮列表，而第二个包含内容。简而言之，它就像一个标签导航器，左边是按钮。

我遇到的问题是按钮容器高度，我希望它是他父亲div的100％。我不想给容器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;
}

FIDDLE

我目前所做的事情 - ＆gt; http://jsfiddle.net/BeNdErR/kVcds/
我想要达到的结果，没有固定的高度 - ＆gt; http://jsfiddle.net/BeNdErR/kVcds/2/
我想要涵盖的另一个案例：内容比按钮div短 - ＆gt; 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;
}

由于绝对定位的按钮元素现在不在页面流中，您可以将#buttons div的宽度等于#content div，以使其仍然在正确的位置。

请参阅更新的小提琴：

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

Answer 2

您可能想参考此链接。它可能会让你得到你想要的东西，但它并不像你想要的那么简单。

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

希望这有帮助！

儿童身高100％没有设定父母固定高度

2 个答案: