Reputation:
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?
Upvotes: 148
Views: 157139
Reputation: 736
Althrough this question/workaround are quite old but still working (& annoying), I would like to add something from spec.
As @psayre23 mentioned that adding 1px
to "hack" table
's height
would force browser engine to actually calcuate td
's height afterwards and fix this "issue". It looks not intuitive, but it's by design (and not limited to table
):
From "Content height: the 'height' property" (CSS 2.1 spec), the <percentage>
part says:
If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.
This sentence can also be found on MDN's height doc.
Upvotes: 2
Reputation: 25675
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());
});
Upvotes: 47
Reputation: 7328
This questions is already answered here. Just put height: 100%
in both the div
and the container td
.
Upvotes: -4
Reputation: 418
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>
Upvotes: 3
Reputation: 35
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');
}
}
Upvotes: -2
Reputation: 3034
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.
Upvotes: 275
Reputation: 8096
Modify the background image of the <td> itself.
Or apply some css to the div:
.thatSetsABackgroundWithAnIcon{
height:100%;
}
Upvotes: -5