css - How to get div height 100% inside td of 100% -
this question seems have been asked @ least 10 other times here on stackoverflow not 1 of them has answer. 1 different in issue appears in firefox.
i have table height 100%, tr height 100%. set border of td can see. see td 100% expected. put div in td , set height 100%. it's 100% in chrome. it's not 100% in firefox.
how fix this?
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's snippet
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'll see
bbbbbbbbbbb b#########b b#rrrrrrr#b b#r r#b b#r r#b b#r r#b b#rrrrrrr#b b#########b bbbbbbbbbbb whereas in firefox it's
bbbbbbbbbbb b b b#########b b#rrrrrrr#b b#r r#b b#rrrrrrr#b b#########b b b bbbbbbbbbbb where b = blue td. # = black div should 100%. r = red inner div should 100% (and apparently in either case). it's black 1 that's wrong.
what css have fix firefox behave chrome in case?
ps: yes need table. i'm displaying tabular data. example above simplified single cell simplify debugging.
Comments
Post a Comment