高度：100％的<div>里面的<div>与显示：表格单元格

这是使用display: table 2列标记display: table和display: table-cell CSS声明： HTML：

 <div class="table"> <div class="cell"> <p>Text <p>Text <p>Text <p>Text <p>Text <p>Text <p>Text <p>Text </div> <div class="cell"> <div class="container">Text</div> </div> </div> 

CSS：

 .table { display: table; } .cell { border: 2px solid black; vertical-align: top; display: table-cell; } .container { height: 100%; border: 2px solid green; } 

但.container块不会垂直填充父级单元格。 这里是一个JsFiddle的例子： http : //jsfiddle.net/MGRdP/2 。

我有 | | 我需要的

请不要提出JS解决scheme。

Answer 1

当您使用%设置高度或宽度时，请始终设置父元素的宽度/高度

尝试更新小提琴

http://jsfiddle.net/MGRdP/6/

Answer 2

设置height: 100%; 并overflow:auto; div里面.cell

Answer 3

这正是你想要的：

HTML

 <div class="table"> <div class="cell"> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> </div> <div class="cell"> <div class="container">Text</div> </div> </div> 

CSS

 .table { display: table; height:auto; } .cell { border: 2px solid black; display:table-cell; vertical-align:top; } .container { height: 100%; overflow:auto; border: 2px solid green; -moz-box-sizing: border-box; } 

Answer 4

除了jsFiddle之外，如果您希望跨浏览器（IE11，Chrome，FF），我可以提供一个丑陋的黑客攻击。

放在.cell而不是身高：100％; 高度：1EM;

问候，萨尔

Answer 5

定义你的.table和.cell height:100%;

  .table { display: table; height:100%; } .cell { border: 1px solid black; display: table-cell; vertical-align:top; height: 100%; } .container { height: 100%; border: 10px solid green; } 

演示

Answer 6

使表格单元格位置相对，然后使内部div的位置为绝对的，顶部/右侧/底部/左侧全部设置为0px。

 .table-cell { display: table-cell; position: relative; } .inner-div { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; } 

Answer 7

 table{ height:1px; } table > td{ height:100%; } table > td > .inner{ height:100%; } 

确认使用Chrome 60.0.3112.113 Firefox 55.0.3 Internet Explorer 11