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

Question

I have an HTML page that is generated from two different frameworks. 我有一个从两个不同的框架生成的HTML页面。 I can't make huge changes to it, because of those frameworks, but I can adjust the html with jquery. 由于这些框架，我无法对其进行重大更改，但是我可以使用jquery调整html。 Basically, I have an application that has a header, and a second reporting application that has a header (let's call it the subheader), content, and a footer. 基本上，我有一个具有标头的应用程序，还有一个具有标头（称为副标题），内容和页脚的第二个报表应用程序。 The behavior I'm seeking is that the document is positioned to consume the full viewport, the footer is stuck to the bottom, and the content div expands or contracts as needed, and has overflow so that if the real data is to big for the content div, it scrolls. 我要寻找的行为是：文档定位为使用整个视口，页脚固定在底部，内容div根据需要扩展或收缩，并溢出，因此如果实际数据对于内容div，它会滚动。 My solution works in Chrome, but in IE, the document itself (incorrectly) gets a scrollbar, in addition to the content frame (correctly) getting a scrollbar. 我的解决方案可在Chrome中使用，但在IE中，文档本身（错误地）会获得一个滚动条，而内容框架（正确地）会获得一个滚动条。

Appreciate any help you can provide. 感谢您可以提供的任何帮助。

jsfiddle here . jsfiddle 在这里。

Code: 码：

<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: 使用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);
}

);

And css: 和CSS：

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

Answer 1

From what i can see you are missing the -ms-overflow-style property in your CSS. 据我所知，您在CSS中缺少-ms-overflow-style属性 。 Try this: 尝试这个：

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

And if you need to add it somewhere else just do the same. 如果您需要将其添加到其他位置，请执行相同的操作。 And if you want to read more on that matter check this ! 如果您想了解更多有关此事的信息，请检查此！

Answer 2

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

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

问题描述

2 个解决方案

解决方案1
1 2015-01-19 19:54:56

解决方案2
0 已采纳 2015-01-19 19:42:42

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

问题描述

2 个解决方案

解决方案1 1 2015-01-19 19:54:56

解决方案2 0 已采纳 2015-01-19 19:42:42

解决方案1
1 2015-01-19 19:54:56

解决方案2
0 已采纳 2015-01-19 19:42:42