How to make <div> fill <td> height
HtmlCssHtml TableHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
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());
});
Solution 3 - Html
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>
Solution 4 - Html
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');
}
}
Solution 5 - Html
This questions is already answered here. Just put height: 100%
in both the div
and the container td
.
Solution 6 - Html
Modify the background image of the <td> itself.
Or apply some css to the div:
.thatSetsABackgroundWithAnIcon{
height:100%;
}