html - 将子元素高度设置为父元素的 100%

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）中完美运行。