How to get div height 100% inside td of 100%
This question seems to have been asked at least 10 other times here on
stackoverflow but not one of them actually has an answer. This one is
slightly different in that the issue appears in Firefox.
I have a table height 100%, with a tr height 100%. I set the border of the
td to something I can see. I see that the td is 100% as expected. I put a
div in that td and set it to height 100%. It's 100% in Chrome. It's NOT
100% in Firefox.
How do I 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>
</table>
</div>
</body>
</html>
Here's a fiddle http://jsfiddle.net/greggman/F4ESJ/
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
In Chrome and
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 that should be 100%. r = red inner div
that should also be 100% (and apparently is in either case). It's the
black one that's wrong.
In Firefox. How do I get Firefox to behave like Chrome in this case?
PS: Yes I need a table. I'm displaying tabular data. The example above is
simplified to a single cell to simplify debugging.
No comments:
Post a Comment