CSS: force parent (table-cell) height

Question

#wrapper { display: table; min-height: 100%; height: 100%; margin: 0px auto; } #header-wrap, #content-wrap, #footer-wrap { display: table-row; height: 1px; } #content-wrap { height: auto; } <div id="wrapper"> <div id="header-wrap"></div> <div id="content-wrap"> <section id="content"></section> </div> <div id="header-wrap"></div> </div> 

#wrapper acts like a table, where #header-wrap , #content-wrap and #footer-wrap are tabs that help push the footer to the bottom of the page.

How can I get the #content section to populate #content-wrap height?

I will not use absolute positioning.

Answer 1

Since the #content-wrap browser determines the height, all you have to do is set #content to 100% of the height of the parent element.

 #content{ height:100%; } 

If it is not set to this height, I would suggest that perhaps some css property will be set later, which overrides this.

Answer 2

Consider this example ...

 <div> <p>Lorem ipsum dolor sit amet cosectetur...</p> </div> 

and given CSS3 code:

 div { position: relative; } div>p { height: 100%; position: absolute; } 

When the absolute element is set height or width to 100%, by default it will correspond to the nearest parent style as relative or html .