1

可変高ヘッダーがあります。その下のコンテンツ div をウィンドウの高さ全体に拡張したい。しかし、コンテンツ div を高さ 100% に設定すると、(ヘッダーの高さのために) コンテンツ div が画面からはみ出し、スクロール バーが表示されます。

これは固定ヘッダーで実行できることを知っています。 /) しかし、彼の方法 (上部と下部のセットによる絶対配置) は可変高さのヘッダーでは機能しないと思います。

テーブル表示 (http://stackoverflow.com/questions/8555820/) を使用した解決策がありますが、IE7 をサポートしたいです。

要約すると：

  • ヘッダーは高さ可変
  • コンテンツ div をウィンドウの下部まで拡張したい
  • 実際に必要でない限り、スクロールバーは必要ありません
  • 純粋なcssソリューションがない場合、JQueryでこれを行う方法をすでに知っています

以下は、問題を示すコード例です。

<!DOCTYPE html>

<html>
<head>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}

html, body { height: 100%; }

#header { background-color: yellow; }

#content {
background-color: gray;
height: 100%;
}
</style>
</head>

<body>
<div id="header">
<h1>A Heading</h1>
</div>

<div id="content">
<p>A paragraph.</p>
</div>
</body>
</html>
4

4 に答える 4

1

オーバーフロープロパティを使用して、スクロールバーを削除できます。ただし、コンテンツは1ページに収まる必要があります。

html, body { height: 100%; overflow: hidden;}

それ以外の場合は、JavaScriptが必要になると思います。

于 2012-11-12T14:38:35.050 に答える
1

これは単純化しすぎかもしれませんが、の背景色をbody同じ色に設定することで、コンテンツ エリアの高さを偽装できますgray。

そうすれば、

  • コンテンツがページの下部まで伸びていなくても、伸びているように見えます。
  • コンテンツが垂直方向の制限を超えると、本文がそれに合わせて伸びます。
于 2012-11-12T14:45:54.497 に答える
0

このような問題に出くわすたびに、ページを<body>リファクタリングして、すべてのスクロールで全高の要素になるようにします。

position:fixedヘッダーを上部に保持し、本文をコンテンツとともにスクロールできるようにすることができます。サイドバーやその他の要素でも同じことができます。

于 2012-11-12T14:42:41.370 に答える
0

ヘッダーが「コンテンツ」div 内にあるように、html をリファクタリングすることを考えましたか? そうすれば、ヘッダーの高さは引き続き可変であり、コンテンツ div は引き続きページを埋めます。コンテンツ div の境界線のスタイルを設定する必要がある場合にのみ問題が発生します。意図したレイアウトに関する何かが、これが良い解決策になるのを妨げますか?

例えば

<body>
    <div id="content">
        <div id="header">
            <h1>A Heading</h1>
        </div>

        <p>A paragraph.</p>
    </div>
</body>

...そして、そこまで行く場合は、いつでも content div を完全に削除して、すべてを body 内に配置できます。これはとにかく 100% の高さです:

<body>
    <div id="header">
        <h1>A Heading</h1>
    </div>

    <p>A paragraph.</p>
</body>
于 2012-11-12T14:52:41.800 に答える