如何在IE7中使用非像素高度的溢出：自动

Question

I am trying to get the following code to work without the 670px hardcoded into the app:

        <tr>
            <td height="100%">
                <div id="navigation" class="navigation">
                    <jsp:include page="menu.jsp" flush="true"/>
                </div>
            </td>
            <td>
                <div style="height:670px; overflow: auto; width:100%;">
                    <jsp:include page='dynamicContent.jsp' flush="true"/>
                </div>
                <div>
                    <center><jsp:include page="footer.jsp" flush="true" /></center>
                </div>
            </td>
        </tr>

It renders fine in IE7 before a window resize - the content pane scrolls with the footer at a fixed height above the page bottom.

However, this stops working (for obvious reasons) when I make the window smaller as I have the HTML of the page set to use overflow:hidden.

Unfortunately, using "height:75%" doesn't seem to be compatible with overflow in IE7.

Does anyone have any idea how I might fake this for IE7 (it needs to be compatible with IE7 cause of project requirements)? Unfortunately this code is pretty embedded so using CSS positioning instead of a table is also probably more work than we will be able to handle before our next release.

Answer 1

Get rid of the overlow: auto , the overlow: hidden , and the fixed height. Instead give your footer a fixed position and add a bottom margin to the body the height of the footer.

body
{
    margin-bottom: 100px;
}
.footer
{
    position: fixed;
    bottom: 0;
    height: 90px;
    padding-top: 10px;
    background-color: #fff;
}

Make sure to set a background for the footer, or else the page content can show through.

Here's a working live example: http://jsfiddle.net/ADpMs/