1

例を考えてみましょう。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        html, body  { height:100%; width:100%; padding:0; margin:0; }
        body        { overflow:scroll; }
        #wrapper    { background:#5f9ea0; width:500px; height:100%; min-height:100%; margin:0 auto; overflow:auto; }
        #content    { background:#336699; width:400px; height:100%; min-height:100%; margin:0 auto; overflow-x:hidden; position:relative;}
        #info-block { background:#d2691e; width:300px; left:20px; position:absolute; }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="content">
            <div id="info-block">Info..<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>...End</div>
        </div>
    </div>
</body>
</html>

この例にはいくつかの問題があります。

  1. スクロールバーを。#contentの代わりに間違った場所に配置しbodyます。
  2. 、または適切な高さを計算しませんbody。の代わりに期待されます。（下のスクリーンショット）。#wrapper#content522px227px

実際のコンテンツの高さは522pxです 計算された高さは227pxですが、これは間違っています

したがって、実際の問題は、#info-block要素のコンテンツの高さを取得するためのページが必要なことです。設定が異なる場合がありますが、すべて失敗します。

動作する1つの解決策は、jQueryを使用して、の高さをの高さと比較し、それを、、および#info-blockに再帰的bodyに適用することです。しかし、これは間違っています。CSSのみのソリューションを探しています。body#wrapper#content

そして、それはインタラクティブな水平アコーディオンの一部であるため、要素のposition:absoluteプロパティを取り除くことはできません。#info-block

前もって感謝します。

4

1 に答える 1

0

別の Stackoverflow スレッドで同様の質問がありました。参照用にスレッドをリンクします。

min-height 100% の親内の子は高さを継承しません

Chrome/Safari/Firefox では min-height で高さを継承できないようです。たぶんそれが問題ですか？スレッドには jQuery の問題解決があり、誰かがその display: block; を報告しています。問題を解決する必要があります。

見てください！

于 2012-09-17T13:29:05.003 に答える