How to make
fill height

Question

I've looked through several posts on StackOverflow, but haven't been able to find an answer to this rather simple question.

I have an HTML construct like this:

<table>
  <tr>
    <td class="thatSetsABackground">
      <div class="thatSetsABackgroundWithAnIcon">
        <dl>
          <dt>yada
          </dt>
          <dd>yada
          </dd>
        </dl>
      <div>
    </td>
    <td class="thatSetsABackground">
      <div class="thatSetsABackgroundWithAnIcon">
        <dl>
          <dt>yada
          </dt>
          <dd>yada
          </dd>
        </dl>
      <div>
    </td>
  </tr>
</table>

What I need is for the div to fill the height of the td, so I can be able to position the div's background (the icon) at the bottom-right corner of the td.

How do you suggest I go about that?

Related: http://stackoverflow.com/questions/8344850/make-the-background-color-of-a-div-fill-the-enclosing-td — Chris Moschini, Jun 29 '12 at 04:58

score 248 · Accepted Answer · answered Aug 22 '10 at 17:22

248

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.

answered Aug 22 '10 at 17:22

psayre23

2,766
2
16
10

7

While it seems to work fine in webkit, IE9 completely breaks. – Daniel Imms Jul 12 '12 at 07:43
Work for me in IE11 only when I also set div to inline-block. Thanks! – Danny C Sep 24 '15 at 12:06
9

Here's a solution that also works in Firefox: http://stackoverflow.com/questions/36575846/how-to-make-div-fill-td-height-in-firefox/36576083#36576083 – Wouter Apr 12 '16 at 14:43
4

To make it work in Firefox as well as in Chrome I had to use `min-height: 1px;` instead of `height: 1px;` – Matt Leonowicz Jun 06 '19 at 07:02
4

I am not sure whether I like CSS or hate it – 0xC0DED00D Jul 15 '20 at 13:31
10

10 years latter still the only solution out there :D – Християн Христов Dec 18 '20 at 15:17
2

After 12 years latter this is helpful for me – Harshad Prajapati Jul 08 '22 at 09:05
Works in Chrome, but can't get it to work in Firefox, even using the `min-height` suggestion mentioned above. – DudeGuy Dec 15 '22 at 19:25
Setting the
s s and s to 100% works in both Chrome and Firefox for me. Source: https://social.msdn.microsoft.com/forums/en-US/d4c70e42-2182-4d50-a14f-45f38c3e1763/how-can-i-make-a-divs-height-100-of-a-dynamic-td?forum=asphtmlcssjavascript
– DudeGuy Dec 15 '22 at 19:51
1

the fact that this answer works infuriates me. makes no sense but thank you – jgritten Jun 22 '23 at 20:58

score 44 · Answer 2 · edited Apr 12 '22 at 09:26

44

CSS height: 100% only works if the element's parent has an explicitly defined height. For example, this would work as expected:

td {
    height: 200px;
}

td div {
    /* div will now take up full 200px of parent's height */
    height: 100%;
}

Since it seems like your <td> is going to be variable height, what if you added the bottom right icon with an absolutely positioned image like so:

.thatSetsABackgroundWithAnIcon {
    /* Makes the <div> a coordinate map for the icon */
    position: relative;

    /* Takes the full height of its parent <td>.  For this to work, the <td>
       must have an explicit height set. */
    height: 100%;
}

.thatSetsABackgroundWithAnIcon .theIcon {        
    position: absolute;
    bottom: 0;
    right: 0;
}

With the table cell markup like so:

<td class="thatSetsABackground">  
  <div class="thatSetsABackgroundWithAnIcon">    
    <dl>
      <dt>yada
      </dt>
      <dd>yada
      </dd>
    </dl>
    <img class="theIcon" src="foo-icon.png" alt="foo!"/>
  </div>
</td>

Edit: using jQuery to set div's height

If you keep the <div> as a child of the <td>, this snippet of jQuery will properly set its height:

// Loop through all the div.thatSetsABackgroundWithAnIcon on your page
$('div.thatSetsABackgroundWithAnIcon').each(function(){
    var $div = $(this);

    // Set the div's height to its parent td's height
    $div.height($div.closest('td').height());
});

edited Apr 12 '22 at 09:26

Kirk Beard

9,569
12
43
47

answered Aug 22 '10 at 17:17

Pat

25,237
6
71
68

That could work. Let me get back to you when I've tried. I did read up on the subject and understood that
needs a specified height to be able to scale to 100%. From what I read that was possible to do with jQuery though, since it can calculate it for me.
– Aug 23 '10 at 15:35
Yes, that's exactly it. For the `
`'s height: 100% to work, the `` (which is the `
`s parent) must have a specified height. And you're also right - jQuery would do it quite easily for you - see my updated example.
– Pat Aug 23 '10 at 15:44
2

I didn't really work all that well, and we've decided on different approach. But I'll accept your answer since it's the best one around. – Sep 15 '10 at 17:36
3

Hah, if only I had a dollar for the number of times CSS has made me change my approach :) – Pat Sep 15 '10 at 17:43
7

Am I the only one who thinks that "CSS height: 100% only works if the element's parent has an explicitly defined height" is a really dumb rule? The browser determines the parent element's height anyway; there's no way *you* should have to explicitly set the parent element's height. – Jez Nov 26 '12 at 17:47
@Jez trust me, you're not the only one. – Pat Nov 26 '12 at 18:45
`position: relative` on a `` is buggy in Firefox. – Radek Mar 18 '13 at 15:49
1

the jquery solution worked though only when I placed it at the end of the file, thanks – luke_mclachlan Jan 16 '16 at 20:15
The jQuery solution is the best for all browsers and simplicity. – Tom Bowen Sep 13 '16 at 10:29

score 3 · Answer 3 · edited Apr 12 '16 at 13:02

3

You could try making your div float:

.thatSetsABackgroundWithAnIcon{

    float:left;
}

Alternativelly, use inline-block:

.thatSetsABackgroundWithAnIcon{

    display:inline-block;
}

Working example of the inline-block method:

table,
th,
td {
  border: 1px solid black;
}

<table>
  <tr>
    <td>
      <div style="border:1px solid red; height:100%; display:inline-block;">
        I want cell to be the full height
      </div>
    </td>
    <td>
      This cell
      <br/>is higher
      <br/>than the
      <br/>first one
    </td>
  </tr>
</table>

edited Apr 12 '16 at 13:02

Wouter

1,829
3
28
34

answered Aug 22 '10 at 17:19

angryobject

418
2
7

The float:left suggestion doesn't seem to work. This answer could be improved by removing it, since the second solution mentioned seems to work. – Wouter Apr 12 '16 at 12:17
1

It doesn't with Firefox. It seems only to work with Chrome. – YLombardi Apr 27 '16 at 10:00
10

That snippet doesn't work on Chromium either, at least nowadays (I'm using 63.0.3239.84). – Michael Dec 11 '17 at 22:24
Setting `display: inline-block` will often make the div *taller* than the `` element would otherwise have been. In my case, this made this result a non-solution. I want a way to style the div that will make it *exactly* the height that the table cell would have been otherwise. In particular, this comes up if there is no text and are no other inline elements in the table row. – cazort Mar 16 '22 at 18:15

GoodNews · Answer 4 · 2014-06-28T15:14:06.703

Really have to do this with JS. Here's a solution. I didn't use your class names, but I called the div within the td class name of "full-height" :-) Used jQuery, obviously. Note this was called from jQuery(document).ready(function(){ setFullHeights();}); Also note if you have images, you are going to have to iterate through them first with something like:

function loadedFullHeights(){
var imgCount = jQuery(".full-height").find("img").length;
if(imgCount===0){
    return setFullHeights();
}
var loaded = 0;
jQuery(".full-height").find("img").load(function(){
    loaded++;
    if(loaded ===imgCount){
        setFullHeights()
    }
});

}

And you would want to call the loadedFullHeights() from docReady instead. This is actually what I ended up using just in case. Got to think ahead you know!

function setFullHeights(){
var par;
var height;
var $ = jQuery;
var heights=[];
var i = 0;
$(".full-height").each(function(){
    par =$(this).parent();
    height = $(par).height();
    var tPad = Number($(par).css('padding-top').replace('px',''));
    var bPad = Number($(par).css('padding-bottom').replace('px',''));
    height -= tPad+bPad;
    heights[i]=height;
    i++;
});
for(ii in heights){
    $(".full-height").eq(ii).css('height', heights[ii]+'px');
}

}

score -3 · Answer 5 · edited May 23 '17 at 12:10

-3

This questions is already answered here. Just put height: 100% in both the div and the container td.

edited May 23 '17 at 12:10

Community

1
1

answered May 14 '17 at 09:15

Nacho Coloma

7,070
2
40
43

score -5 · Answer 6 · answered Aug 22 '10 at 15:48

-5

Modify the background image of the <td> itself.

Or apply some css to the div:

.thatSetsABackgroundWithAnIcon{
    height:100%;
}

answered Aug 22 '10 at 15:48

Jage

7,990
3
32
31

as I write in the code. The TD already has a background-image set using a class. So that option is not viable. I have tried setting the height of the div to 100%, but that does not work. It simply wraps to the variable height of the contained
. So something is needed to make the div "understand" that it should fill the height. And height: 100% does not do that. (not alone atleast)
– Aug 22 '10 at 15:54

How to make
fill height

6 Answers6

Linked

Related

How to make fill height

6 Answers6

Linked

Related

How to make
fill height