Menu
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; } .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.
884
With no height value provided for the HTML element, setting the height and/or min-height of the body element to 100% results in no height (before you add content).
For this to work, the <td> must have an explicit height set. */ height: 100%; } .thatSetsABackgroundWithAnIcon .theIcon { position: absolute; bottom: 0; right: 0; } If you keep the <div> as a child of the <td>, this snippet of jQuery will properly set its height:
A browser window is a square that Firefox, Chrome, Opera, Safari, and Edge draw the page in. Setting a <div> element's height to 100% of the browser window is possible with some CSS properties. CSS allows you to adjust the height of an element using the height property. It is very easy if you follow the steps described below.
If you give your TD a height of 1px, then the child div would have a heighted parent to calculate it's % from. Because your contents would be larger then 1px, the td would automatically grow, as would the div. Kinda a garbage hack, but I bet it would work. Show activity on this post.
How to Make a <div> Fill the Height of the Remaining Space 1. The most usual solution to this problem is to use Flexbox. Let’s see how to use it. For this method, we’ll need the... 2. Another way of making a <div> fill the remaining space is to use the CSS position property. Just set the position ...
You need to set the height of the td to 100% too:
<td style="height: 100%"> jsFiddle
151
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
