html - IE8剩余高度

我的目标是在 IE8 (&IE9) 中使用这样的结构。
不想使用 JavaScript，因为某些第 3 方正在动态插入内容，这只会导致不同的滚动条比例。

我一直在寻找“充足”的时间，即相当多的时间。我未能理解和/或使用以下线程。 StackOverflow: make-iframe-to-fit-100-of-containers-remaining-height

<!DOCTYPE html>
<html>
    <body>
        <p>Some text with unknown height, fixed at the top.</p>
        <div>
            Some content that will not exceed the body (100% height),
            but will fill the body until the content is too long, which would give
            a scrollbar.
        </div>
    </body>
</html>

我可以在 Chrome 中实现这一点(pic=whole browser content)，底部的 fiddler:

Chrome example

IE8/9 给我这个(pic=整个浏览器内容，再次滚动到正文底部):

IE messes up

Chrome's fine, fiddler.

谁能帮帮我？

最佳答案

厌倦了没有完成我想要的东西，我最终不得不使用 JS(我意识到确实没有人能够成功地回答我的问题，而且这个解决方案也不是我实际要求的)。

JSfiddle

fiddle 比下面显示的更复杂，因为我需要这些额外的东西。

function adjustHeight() {

    var header = document.getElementById("header");
    var container = document.getElementById("container");

    container.style.top = header.clientHeight + "px";
}

// Note the place of the method invocation ('asap'), adjustHeight()
<body>
    <div id="header">
        <p id="p">
            Line1<br/>
            Line2<br/>
            Line3<br/>
            Line4<br/>
        </p>
        <div id="toggle">Toggle</div>
    </div>
    <div id="container">
        <script>adjustHeight();</script>
        <div id="content">
            First row visible<br/><br/>
            Scrollbar shows normally<br/>
            Body doesnt scroll<br/>
            Works on resize too (by default)<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/><br/>

            Last row visible on collapsed/expanded
        </div>
    </div>
</body>

关于html - IE8剩余高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13528403/

html - IE8剩余高度

上一篇：CSS填充水平空间

下一篇：html - 修复 HTML 中的左右 DIV