Geek Answers Handbook

Make div with display: table has 100% height of parent div

I am trying to make a div with display:table fill 100% of my parent div. Here is the div structure:

 <div id="container"> <div id="header"></div> <div id="body"> <div id="mytablediv"> <div class="row"> <div id="left"> </div> <div id="content">&nbsp; </div> <div id="right"> </div> </div> </div> </div> <div id="footer"></div> </div>

And here is the CSS:

 html, body { margin:0; padding:0; height:100%; } #container { min-height:100%; position:relative; } #header { background:#ff0; padding:10px; } #body { padding:10px; padding-bottom:60px; } #footer { position:absolute; bottom:0; width:100%; height:60px;background:#6cf; } #mytablediv { display:table; } #row { display:table-row; } #left, #content, #right {display:table-cell;} #left, #right {background-color:red;}

What is my complete code. Now what I really want to do for #mytablediv is to fill in the entire gap between the header and footer.

Here is a live jsFiddle example.

+4
source share
4 answers

Here you can use the inheritance property and just use for #mytablediv

following:
 #mytablediv { height: inherit; }

You specified div#container as 100% height, you will need to assign the specified div#body property to get the desired result.

+4
source

For the percentage height to work on #mytablediv (or any other element, for that matter), the parent must have some height set on it. This parent element height may also be a percentage, but in this case, for this percentage, its own parent ( #mytablediv grandparent) must also be set to some type of height . And that comes to the html element.

In your case, if you want #mytablediv have 100% page height on the page (actually in fact), then you need the "specific height " to be 100% on all ancestors.

 html, body, #container, #body { height: 100% } //now this works #mytablediv { height: 100%; }

Here is an example: http://tinkerbin.com/UBfgrRz5

+1
source

Atlast, I decided that this is work for jQuery.

 function heightAutomate() { var bodyHeight = $("body").height(); var viewportHeight = $(window).height(); var shudbe_bf_Height = $("body").height() - 153; /*153:height of div+footer*/ var real_bf_Height = $("#mytablediv").height(); if (real_bf_Height < shudbe_bf_Height) { $("#bodyfix").css({"height":shudbe_bf_Height}); } }
0
source

To achieve the desired result, you should use a slightly different structure for your part of HTML. I ran into the same problem and I used the solution as described in this:

http://jsfiddle.net/92y9L/

Associated Code:

CSS

 *{ margin:0; border:0; padding:0; } .outer { position:relative; width:250px; height:350px; border:1px dotted black; margin:-1px; } .tbl { display:table; width:100%; height:100%; } .tr { display:table-row; } .td { display:table-cell; margin:0 auto; text-align:center; } .tr .body-outer { height:100%; width:100%; } .body-outer { position:relative; } .body-inner { position:absolute; top:0; right:0; bottom:0; left:0; overflow-y:auto; overflow-x:auto; } .stretch-x { width:100%; } .stretch-y { height:100%; }

HTML

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <body> <div class="outer"> <div class="tbl"> <div class="tr" style="background-color:Red;"> <p>test paragraph. This is used as placeholder<br />new line....</p> </div> <div class="tr stretch-y" style="background-color:Gray;"> <div class="td stretch-y" style="background-color:Blue;"> <div class="body-outer" style="background-color:Green;"> <div class="body-inner"> <p style=" white-space:nowrap;">test paragraph. This is used as placeholder<br />new line....</p> <p>test paragraph. This is used as placeholder</p> <p>test paragraph. This is used as placeholder<br />new line....</p> <p>test paragraph. This is used as placeholder</p> <p>test paragraph. This is used as placeholder<br />new line....</p> <p>test paragraph. This is used as placeholder</p> <p>test paragraph. This is used as placeholder<br />new line....</p> <p>test paragraph. This is used as placeholder</p> <p>test paragraph. This is used as placeholder<br />new line....</p> <p>test paragraph. This is used as placeholder</p> <p>test paragraph. This is used as placeholder<br />new line....</p> <p>test paragraph. This is used as placeholder</p> <p>test paragraph. This is used as placeholder<br />new line....</p> <p>test paragraph. This is used as placeholder</p> <p>test paragraph. This is used as placeholder<br />new line....</p> <p>test paragraph. This is used as placeholder</p> <p>test paragraph. This is used as placeholder<br />new line....</p> <p>test paragraph. This is used as placeholder</p> <p>test paragraph. This is used as placeholder<br />new line....</p> <p>test paragraph. This is used as placeholder</p> </div> </div> </div> </div> <div class="tr" style="background-color:Red;"> <p>test paragraph. This is used as placeholder<br />new line.</p> </div> </div> </div> </body>

The concept of this approach is to use an internal css table with three rows of the css table under the borders of the external container. The top line of css is used to place the header, and the bottom line is to place the footer. Both of them have automatic sorting based on their contents.

The middle row, which is used as a container for the body, is stretched by setting the height to 100%. For the internal content of the css row "body", the external relative / internal absolute layout method was used to force the content to be set inside the borders of the css "body" string and allow overflow. The css table intermediate cell is required by IE to fulfill the stretch requirement.

This design works fine with FF + Chrome + Opera + Safari, but IE refuses to calculate the height of the body content relative to its ancestor, the css table row, and it continues to correlate it with the height of the external case. This is exactly the problem I am facing.

In general, if there is no problem, if IE shifts the contents of the body, this solution may be useful for you.

0
source

More articles:


All Articles