0

私は使用しています：

html, body {
     height: 100%;
}

section {
     width: 100%;
     height: 100%;
}

また、.full の下に表示されるすべてのコンテンツが body タグに含まれていないようですが、これを修正する方法はありますか? それとも、このままでも構わないのでしょうか。

オーバーフロー値を変更して高さを自動に変更しようとしましたが、何も機能しないようです。

<body>

<section class="full">

     <div class="center"></div>

</section> <!-- Everything below here appears outside <body> -->

<section class="main">

<header>
<!-- Nav goes here -->
</header>

<content>
<!-- Main divs are here -->
</content>

</section> 

</body>
4

3 に答える 3

3

これは、マークアップ内のすべての に 100% の高さを与える CSS ルールがあるためです<section>。

html,body最初のセクション ('full' を含む) はすべてのビュー ポートの高さを取り (これは、ビュー ポートの実際の高さである 100% の高さを指定したためにのみ可能です)、ブラウザーに垂直スクロールを追加させて、残りのコンテンツを表示します。

こちらのデモをご覧ください。

于 2013-09-13T13:15:45.833 に答える
1

Web ページには<section>高さ 100% の 2 つの要素があるため、2 つ目の要素はスクロールしなければ見えない位置に表示されます。

于 2013-09-13T13:15:02.147 に答える
0

の高さ100%は、「コンテンツの 100% の高さ」ではなく、「親要素の高さの 100%」を意味します。htmlとの場合body、ビューポートが親です。したがって、ブラウザ ウィンドウの高さが 1000 ピクセルの場合、そのサイズはbody.

section要素は と同じ高さになります(bodyつまり、それぞれが 1000 ピクセルになります)。

したがって、最初のステップは、height: 100%どこでも削除することです。次のステップは、あなたが達成したい効果を私たちに伝えることです.

于 2013-09-13T13:29:21.447 に答える