I'm attempting to make an image take all the remaining width available for a table and span the entire height of a table without extending it any further, with overflow:auto to scroll if there's not enough height.
The width bit is easy, but no matter what I do the table cell containing the image will extend the height of the table. Is there a way to prevent this, short of explicitly setting the image's height?
Thus far the solutions I've found differ on browser, so aren't ideal. You could render different markup based on the client. (But still looking for a more universal answer.)
Updated again for the most universal solution so far:
<style>
div.ImageBlock
{
height:100%;
width:100%;
left:0px;
top:0px;
overflow:auto;
}
div.IE_CompatMode
{
position:absolute;
}
</style>
Either works in Chrome, and the IE_CompatMode has to be added when IE has compatibility mode On.
<td rowspan="2" style="position:relative;">
<div class="ImageBlock [conditional:]IE_CompatMode">
<img src="Images/Jellyfish.jpg" style="position:absolute; top:0px; left:0px;" />
</div>
</td>
And nothing (that I've yet tried) works in Firefox.
You would have to use a wrapper element around the content to restrict the height.
<table>
<tr>
<td><div class="overflow">This is short.</div></td>
<td><div class="overflow">This is longer.</div></td>
<td><div class="overflow">This is really long and repeated. This is really long and repeated.</div></td>
</tr>
</table>
.overflow {
max-height:40px;
overflow:hidden;
}
var tableHeight = $('table').height();
$('.overflow').css('height',tableHeight + 'px');
Could always give the image a percentage e.g. height="100%" that should make it the full size of the cell that it is in but would restrict overflow.