Height: 100% for the <div> inside the <div> with the display: table-cell

Question

Here is a 2-column layout using CSS display: table and display: table-cell CSS declarations:

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

 <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> 

But the .container block .container not fill the parent cell vertically. Here is an example on JsFiddle: http://jsfiddle.net/MGRdP/2 .

What do I have | What I need

Please do not offer a JS solution.

Answer 1

When you use % to set the height or width, always set the width / height of the parent elements:

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

 <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> 

Answer 2

set height: 100%; and overflow:auto; for div inside .cell

Answer 3

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

Confirmed work on:

• Chrome 60.0.3112.113, 63.0.3239.84
• Firefox 55.0.3, 57.0.1
• Internet Explorer 11

Answer 4

In addition to jsFiddle, I can offer you an ugly hack if you want to make it cross-browser (IE11, Chrome, Firefox).

Instead of height:100%; put height:1em; in .cell .

Answer 5

This is exactly what you want:

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 6

Make the table cell position relative, then make the inner div position absolute, and the top / right / bottom / left are all set to 0px.

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

Answer 7

Define your .table and .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; } 

Demo