0

IE8（＆IE9）ではこのような構造を目指しています。
一部のサードパーティがコンテンツを動的に挿入しているため、JavaScriptを使用しないでください。これにより、スクロールバーのスケールが異なるだけになります。

私は「たっぷり」の時間、つまりかなりの時間を探してきました。次のスレッドを理解および/または使用できませんでした。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 =ブラウザコンテンツ全体）でこれを実現できます。下部にフィドラーがあります。

Chromeの例

IE8 / 9は私にこれを与えます（pic =ブラウザコンテンツ全体、再び本文の下部にスクロールされます）：

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

ここではiframeではなくdivを使用しているようですが、これが機能するはずのフィドルです。配置された要素を使用します。

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

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

于 2012-11-23T12:52:16.453 に答える