Best IT Recipes

How to get div height 100% inside td 100%

This question was apparently asked at least 10 times here on stackoverflow, but none of them actually answered. This is slightly different in that the problem appears in Firefox.

I have a table height of 100%, a height of tr 100%. I set the td border to what I see. I see that td is 100% as expected. I put the div in td and set it to 100% height. This is 100% in Chrome. This is NOT 100% in Firefox.

How to fix it?

Example

 <!DOCTYPE html> <html> <head> <style> body, html { width: 100%; height: 100%; padding: 0px; margin: 0px; } .full { width: 100%; height: 100%; border: 10px solid red; } #content { width: 100%; height: 100%; } #content>table { width: 100%; height: 100%; } #content>table>tbody>tr>td { border: 10px solid blue; width: 50%; } #container { width: 100%; height: 100%; border: 10px solid black; } </style> </head> <body> <div id="content"> <table> <tr> <td> <div id="container"> <div class="full"> foo </div> </div> </td> </tr> </table> </div> </body> </html>

Here is a fragment

  body, html { width: 100%; height: 100%; padding: 0px; margin: 0px; } .full { width: 100%; height: 100%; border: 10px solid red; } #content { width: 100%; height: 100%; } #content>table { width: 100%; height: 100%; } #content>table>tbody>tr>td { border: 10px solid blue; } #container { width: 100%; height: 100%; border: 10px solid black; } 
  <div id="content"> <table> <tr> <td> <div id="container"> <div class="full"> foo </div> </div> </td> </tr> </table> </div>

In Chrome you will see

  bbbbbbbbbbb b#########b b#rrrrrrr#b b#rr#b b#rr#b b#rr#b b#rrrrrrr#b b#########b bbbbbbbbbbb

While in Firefox it is

  bbbbbbbbbbb bb b#########b b#rrrrrrr#b b#rr#b b#rrrrrrr#b b#########b bb bbbbbbbbbbb

where b = blue td . # = black div, which should be 100%. r = red inner div, which should also be 100% (and apparently, anyway). It is black that is wrong.

What CSS should I fix to make Firefox behave like Chrome in this case?

PS: Yes, I need a table. I am showing tabular data. The above example is simplified for a single cell to simplify debugging.

+18
css
Aug 28 '13 at 12:38 on
source share
2 answers

You also need to set the height td to 100%:

 <td style="height: 100%">

jsFiddle

+18
Aug 28 '13 at 12:46 on
source share

I think because firefox needs all the elements in order to have 100% height in css, including your TD.

 #content>table>tbody>tr>td { border: 10px solid blue; width: 50%; height: 100%; }

Got it using firefox with this.

+1
Aug 28 '13 at 12:45
source share


More articles:


All Articles