Question

我有一个HTML页面，它是从两个不同的框架生成的。我不能对它进行大的改动，因为那些框架，但我可以用jquery调整html。基本上，我有一个具有标题的应用程序，以及第二个报告应用程序，它具有标题（让我们称之为子标题），内容和页脚。我正在寻找的行为是文档定位为使用完整视口，页脚停留在底部，内容div根据需要扩展或收缩，并且溢出以便如果真实数据对于内容div，它滚动。我的解决方案适用于Chrome，但在IE中，文档本身（错误地）获取滚动条，以及内容框架（正确）获取滚动条。

感谢您提供的任何帮助。

jsfiddle here。

代码：

<body bottommargin="0" leftmargin="0" topmargin="0" rightmargin="0">
    <div style="width:100%;height:125px;background-color:#FFC;"></div>
</body>

<FORM NAME="rdForm" method="POST">
    <MainBody>
        <DIV id="divOuterContainer" CLASS="NF_display_table_container">
            <DIV id="divHeader" CLASS="NF_top">
                 <SPAN>My SubHeader</SPAN>
            </DIV>
            <DIV id="divContentContainer">
                <DIV id="divContent">
                    <DIV id="divInteractive" CLASS="NF_body2">
                        <div style="width:100%;height:1200px;background-color:#FCC;">
                        </div>
                    </DIV>
                </DIV>
             </DIV>
         <DIV id="divFooter" CLASS="NF_bottom2">
             <SPAN>My Footer
             </SPAN>
         </DIV>
       </DIV>
        </MainBody></FORM>

使用Javascript：

function reflow() {
    var wsize = $(window).height();
    var headers = $("#divContent").position().top;
    var my_footer = $("#divFooter").height();

    var new_height = Math.ceil(wsize - (headers + my_footer));


    $("#divContent").css('height', new_height);
    $("#divInteractive").css('height', new_height);


}
$(document).ready(

function () {
    // Run immediately on DOM ready…
    reflow();
    // And again on page load and resize events
    $(window).bind("load resize", reflow);
}

);

和css：

.hide {
    display: none;
}
.NF_body2 {
    overflow: auto;
}
.NF_top {
    background-color:#CFF;
}
.NF_bottom2 {
    background-color:#CFF;
}
.NF_container2 {
    position: relative;
}

Answer 1

从我可以看到你缺少CSS中的 -ms-overflow-style属性。试试这个：

    .NF_body2 {
    overflow: auto;
    -ms-overflow-style: auto;
}

如果您需要将其添加到其他地方，请执行相同的操作。如果您想了解更多相关信息，请查看this！

Answer 2

尝试溢出：隐藏在body标签上而不是

整个文档在IE11中滚动，但不在Chrome中滚动

2 个答案: