0

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

我一直在寻找“大量”的时间，即相当多的时间。我无法理解和/或使用以下线程。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 中实现这一点（图片=整个浏览器内容），底部的提琴手：

铬示例

IE8/9 给了我这个（图片=整个浏览器内容，再次滚动到正文的底部）：

IE 搞砸了

Chrome 很好，提琴手。

谁能帮帮我？

4

2 回答 2

1

厌倦了没有完成我想要的东西，我毕竟被迫使用 JS（我意识到确实没有人能成功地回答我的问题，而且这个解决方案也不是我实际问的）。

JSfiddle

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

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>
于 2012-11-26T10:25:43.290 回答
0

我看到您在这里使用的是 div 而不是 iframe，这是一个应该可以工作的小提琴。使用定位元素。

position:absolute;
bottom:0px;
top:80px;
left:0px;
right:0px;

http://jsfiddle.net/XQbzy/1/

于 2012-11-23T12:52:16.453 回答