Reputation:
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>
</tr>
</table>
</div>
</body>
</html>
Here's a snippet
body,
html {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.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 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.
What CSS do I have to fix to 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.
Upvotes: 35
Views: 50152
Reputation: 3272
CSS often require some tricks.
Why not adding a big big padding and negative margin to all the divs, and hide the tds overflow?
td {
padding: 1rem 2rem;
max-width: 6rem;
overflow: hidden;
}
td > div {
margin: -150px;
padding: 150px;
}
Here's a pen: https://codepen.io/migli/pen/ZEKXWGE
I didn't test in many browsers, but I guess it should work everywhere?
Upvotes: 0
Reputation: 2818
You need to set the height of the td to 100% too:
<td style="height: 100%">
Upvotes: 30
Reputation: 4005
I think it's because firefox need all elements to have 100% height in the css, including your TD.
#content>table>tbody>tr>td {
border: 10px solid blue;
width: 50%;
height: 100%;
}
Got it working with firefox with this.
Upvotes: 4