How do I set the div to be the full height of the cell?

I have a inside a tablecell. I want the div to be the full height of the cel开发者_C百科l.

I put height:100% in the style - but it does not work

<asp:TableCell ID="tdCustomerLogin" runat="server" HorizontalAlign="Center" VerticalAlign="Top" style="padding:2px; background-color:#33CC4D; border:solid 1px black;">
    <div style="background-color:White; border:solid 1px black; height:100%;">
     .......... other html code
    </div>
</asp:TableCell>

Unless you give the cell an indicative height you can't get the effect that you want.

This is because when each table cell is rendered it's content box isn't stretched to match the height of the row. Instead it is given extra PADDING as required so that it's overall height matches the height of it's Row.

So in effect the Div does have a height of 100% -- it's just not what you expected.

http://www.w3.org/TR/CSS2/tables.html#height-layout

Height will work, so long as you set the height of the parent first.

What are you putting in the Div/Cell? If it is something that is large (will make the cell expand) than you can try

height: auto;
width: auto;

If the cells aren't dynamic, try just setting the DIV dimensions to the size of the cell.

I recommend using CSS. I know using Visual Studio toolbar seems quick, but you could end up with a mess.

Setting the div's height to 100% does work. See http://jsfiddle.net/9nUre/