0

序文: IE7 で高さ 100% の CSS に関するここでおそらく 3 ダースの回答を読んだことがありますが、私の非常に単純な質問に答えるものはないようです。これが重複している場合は申し訳ありませんが、既存の回答が見つかりません。

質問: 左側にナビゲーション バーがある単純な Web サイトを持っています。一部のページでは、ページのコンテンツを下にスクロールする必要がありますが、他のページでは必要ありません。

スクロールが必要かどうかに関係なく、ナビゲーションの背景がページの一番下まで広がるようにしたいのですが、コンテンツがまだスクロールを必要としていない場合は、スクロールを導入したくありません。

これまでのところ、次のことがわかりました。

position: absolute;
height: 100%;

スクロールがまだ存在しない場合はスクロールが追加され、コンテンツが自然にスクロールを必要とする場合は、背景が早期に停止します。

position: absolute;
bottom: 0;

Firefox と Chrome では正確に動作しますが、IE7+ では動作しません

色の HTML 要素で背景画像を繰り返すという回避策を考えましたが、色を変更したい場合は新しい画像を生成する必要があり、ばかげているようです。

4

1 に答える 1

1

IE7 は、doctype が指定されている場合、position:fixed をサポートします。

<!doctype html>
<html>
<head><title>title</title>
<style type="text/css">
html, body{ height:100%; margin:0; padding:0; }
.nav{ position:fixed; left:0; top:0; height:100%; background-color:#ccc; width:100px; }
.very-high{ height:3000px; margin-left:110px; }
</style>
</head>
<body>
    <div class="nav">div class="nav"</div>
    <div class="very-high">a div with height:3000px</div>
</body>
</html>

jsFiddleでデモを作成しました

于 2012-11-14T16:27:49.790 に答える