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

Question

我有一个 HTML 页面是从两个不同的框架生成的。由于这些框架，我无法对其进行巨大的更改，但我可以将 html 调整为 jquery。基本上，我有一个有页眉的应用程序，还有一个有页眉（我们称之为副页眉）、内容和页脚的报告应用程序。我正在寻找的行为是文档被定位为占用整个视口，页脚贴在底部，内容 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

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

Answer 2

据我所知，您的 CSS 中缺少 -ms-overflow-style 属性。试试这个：

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

如果您需要将它添加到其他地方，只需执行相同的操作即可。如果你想阅读更多关于此事的信息，请查看 this!

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

Whole document scrolls in IE11, but not Chrome

html

css

jquery

internet-explorer