Question

所以，我有2个容器：

+ ----------- +
| |
+ --- + |
| | |
| | |
| | |
| | |
+ --- + ------ +

父母有不同数量的内容，所以孩子应该长大到最后。

#logbody {
font-family: calibri;
width: 100%;
height: 85%;
background-color: #DFDFDF;
text-align: center;
padding-top: 16;
overflow: auto;
}

#menu {
float: left;
font-family: calibri;
width: 15%;
height: 100%;
background-color: #F8AA3C;
}

logbody是父项，菜单是孩子。当父母包含很多东西时，它看起来像这样：
+ ----------- +
| |
+ --- + |
| | |
| | |
| | |
| | |
+ --- + |
| |
+ ----------- +

这不是我想要的，孩子应该一起成长。正如您所看到的那样，父级不是100％高度，因为父级之上还有另一个容器。实际上，有一个很大的收益者，这是100％。第一个孩子是12％的某种标题，然后是标题，然后是包含另一个孩子的logbody（菜单）。

<div id=container> //100%
    <div id=header></div> //12%
    <div id=logbody> //85%
        <div id=menu></div>
    </div>
</div>

我知道，这不是正确的代码，只是为了显示结构。是的，剩下的3％是故意的。

那么，是否有任何纯CSS解决方案来适应孩子的高度（菜单）？

Answer 1

不要试图拉伸侧边栏的高度，而是可以使侧边栏后面的背景拉伸整个页面的长度，从而提供相同高度的外观。这实际上具有相同的效果（但请注意，这仅适用于固定宽度的列）。这个技巧被称为Faux Columns技术，是实现等高柱的一种非常标准的方法。

Answer 2

我已经为你的CSS添加了几行，如果我正确理解了这个问题，它似乎有效。

#logbody {
font-family: calibri;
width: 100%;
height: 85%;
background-color: #DFDFDF;
text-align: center;
padding-top: 16;
overflow: hidden; /*This is new*/
position: relative; /*As is this*/
}

#menu {
float: left;
font-family: calibri;
width: 15%;
height: 100%;
background-color: #F8AA3C;
position: absolute; /*This is new*/
}

注意，如果孩子的身高超过其父亲的身高，overflow为hidden为{{1}}，则此方法不会扩展父亲。

Answer 3

如果您尝试维护可视列，则可以将样式移动到围绕这两个元素的包装元素。实际上，使用CSS不能很容易地使列宽相同。

此外，您还可以在#logbody上使用伪元素来创建列背景。伪元素的高度表现得更像您期望子高度的行为。

Answer 4

经过一番思考后，答案非常明确和简单：没有 PURE CSS解决方案，以便CHILD元素可以根据其PARENTS内容增长。在CSS中，元素将根据其OWN内容或其CHILDREN的内容而增长。 -

你可以拥有的唯一解决方案是两个：

1）一个Javascript解决方案。 2）假柱（人造柱）http://www.alistapart.com/articles/fauxcolumns/

让孩子与父容器一起成长

4 个答案: