Question

http://jsfiddle.net/BZNUr/

#container {
background:red;
padding:10px;
height:100%;
}

.button {
color: white;
width:200px;
background:blue;
margin:2px;
display:inline-block;
height:100%;
vertical-align:top;
}

<div id="container">
<div class="button">text text text text text text text text</div>
<div class="button">what</div>
</div>

如何设置第二个子元素占据容器元素的100％高度？我想避免指定容器的高度以及绝对定位。有一个简单的方法吗？（旁注：如果我在jsfiddle链接中提供了所有代码，为什么必须发布代码？这只是杂乱无章）

Answer 1

您可以使用display：table / table-cell（http://jsfiddle.net/BZNUr/14/）：

#container {
    display:table;
}
.button {
    display:table-cell;
}

这会改变其他一些视觉方面，但你可以通过改变其他CSS属性来补偿（我没有这样做，因为我不确定它对你来说是否重要）。

Answer 2

你是在外面的jsfiddle上尝试过的，我的意思是把它放在一个html文件中并在浏览器中打开，即使在指定父容器的100％宽度时，您的代码也能在我的浏览器（chrome和Firefox）中完美运行。

将子元素高度设置为父元素的100％

2 个答案: