Table Layout Issue
Question by ic3b3rg
I have the following simplified layout:
jsfiddle: http://jsfiddle.net/rersW/
<table>
<tr>
<td style="border:1px solid black;height:300px;width:100px">A</td>
<td style="border:1px solid black;height:100%">
<div style="border:1px solid blue;height:100%;width:100px">B</div>
</td>
</tr>
</table>
I need the blue outlined div to fill its cell. I’ve tried box-sizing on the div and the cell as well as changing the display of both (inline-block, etc.). Nothing I try is working.
The contents of cell “A” determine the height of the table.
The contents of cell “B” determine the width of its cell.
It must work identically in Chrome, Firefox, Safari, Opera & IE 8+
TIA
Answer by user1289347
Height:100% requires that the parent has an explicit height. Set the same height in cell b as you do in cell a, which is determining the table height, in this case 300px and the child div will expland.
EDIT
If you can’t explicitly define any of the parent heights you will need to use JS/Jquery. See here http://jsfiddle.net/rersW/3/
Answer by Starx
The reason is height: 100%; needs to be have a parent with height defined , or else you have to
- either fix the height.
- or Chain
height: 100%all the up to body, if no height is fixed anywhere
TO illustrate my point upgrade your markup to this
<td valign="top" style="border:1px solid black; height: 300px;">
<div style="border:1px solid blue;height:100%; display: block;width:100px">B</div>
</td>
