Question

我有3个div并排使用容器div嵌套。每个div在各个页面上都有不同的内容，所以我需要每个嵌套的div扩展到具有最多内容的div的高度。我尝试过使用'height：100％'和'height：auto'，但似乎都没有用。任何人都可以帮助我，或指出我正确的方向。我的HTML是：

<div id="container">
  <div id="column1"></div>
  <div id="column2"></div>
  <div id="column3"></div>
</div>

非常感谢提前。

Answer 1

在所有3个内部div上使用display: table-cell：

#container div { display: table-cell; }

这是 Working Example.

Answer 2

虽然Truth的答案是最好的，certain browsers（通常的嫌疑人）没有正确实现表格单元格。

跨所有浏览器解决方案的工作方式是分配过多的垂直填充和反向边距。例如：

<div class="container">
    <div class="column" style="background: #cc0000;">blah</div>
    <div class="column" style="background: #00cc00;">blah<br />blah<br />blah</div>
    <div class="column" style="background: #0000cc;">blah<br />blah</div>
</div>

和CSS：

.container {
    width: 300px;
    height: auto;
    overflow: auto;
}

.container div.column {
    float: left;
    width: 100px;
    height: auto;
    padding: 0 0 1000px 0;
    margin: 0 0 -1000px 0;
}

Answer 3

你能使用jQuery吗？

如果是，请尝试：http://jsfiddle.net/Rnf82/2/

{display：table-cell;}的问题在于旧版IE不支持

100％身高css

3 个答案: