Html 儿童身高100%，不设置家长固定身高

我有一个容器

div

，其中包含两个孩子

div

：第一个，贴在他父亲的左边框上，包含按钮列表，第二个包含内容。长话短说，它就像一个标签导航器，按钮在左边

我的问题是按钮容器的高度，我希望它是他父母的100%

div

。我不想给container div指定一个固定的高度，因为我希望container根据其内容高度进行相应的更改

正如您在下面的小提琴中所看到的，

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>

小提琴

• 我目前所做的-->

• 我想要达到的结果，没有固定的高度-->

• 我想介绍的另一个案例是：比按钮div-->

对这个问题有什么想法或解决办法吗

---

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

您可以通过将#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，以便它仍然位于正确的位置

请参阅更新的小提琴：

---

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

---

希望这有帮助最小高度>代码，那么？

#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;
}