如何在IE7中使用overflow:auto与非px高度

Question

我正在尝试让以下代码在没有硬编码到应用程序中的670px的情况下工作：

        <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>

在调整窗口大小之前，它在IE7中呈现得很好-内容窗格滚动时，页脚位于页面底部上方的固定高度。

但是，当我将页面的HTML设置为使用overflow:hidden时，当我将窗口变小时，这将停止工作(原因很明显)。

不幸的是，使用“高度:75%”似乎与IE7中的溢出不兼容。

有没有人知道我如何在IE7中伪造这个(它需要与IE7项目需求的原因兼容)？不幸的是，这段代码是非常嵌入的，所以使用CSS定位而不是表格可能会比我们在下一个版本之前能够处理的工作更多。

Answer 1

去掉overlow: auto、overlow: hidden和固定高度。取而代之的是，给你的页脚一个固定的位置，并在正文的底部加上页脚的高度。

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

确保为页脚设置背景，否则页面内容会显示出来。

这里有一个工作的实时示例：http://jsfiddle.net/ADpMs/