user128511
user128511

Reputation:

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>
    </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

Answers (3)

migli
migli

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

Tomzan
Tomzan

Reputation: 2818

You need to set the height of the td to 100% too:

<td style="height: 100%">

jsFiddle

Upvotes: 30

Razz
Razz

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

Related Questions