I have a div #Main with the property height: 100%. Inside this I place a table #MainTable also with height: 100% . My CSS is below the end of this message. This is in a three column with header and footer layout. I want the div #Main always to occupy 100% of the space between the header and footer but it's extending below the footer. I can alter the height of the div so that it fits on one particular screen, but obviously that's too restrictive. If I don't set the height property at all, it's way short of the footer.
Grateful for any help.
/* Main table */
/*Note on margins in tables in CSS2: in CSS2 table cells, rows and columns have no margins, only padding*/
width: 100%; /* the table's width property is percentage of its containing div*/
height: 100%; /* the table's width property is percentage of its containing div*/
/*left: 20%;*/ /*this property has no effect in Mozilla or IE - nothing at all happens*/
padding: 7px 0px 7px 0px;