1

height:100% に関するいくつかのテストを作成しています。

このページでは、次のCSS スタイルが割り当てられているにもかかわらず、青色の領域がページ コンテンツに合わせて高さを伸ばしていないことがわかります。

height:100%;

この動作を解決または理解しようとする上で何か助けはありますか?

4

3 に答える 3

2

height: autoあなたのbody要素に設定し、

body {
  width: 100%;
  font-family: sans-serif;
  height: auto;
}

アップデート

わかりました、コンテンツが少なくても 100% である必要があることに気づきませんでした。

あなたができることは、

体にある程度の高さを与えます (たとえば 1000px)。そして、あなたの 100% はsection1000px に拡張されます。

PS:min-height動作しません。pxまたはで高さを指定する必要がありますem。

ただし、要素が 1000px の 100% と 100% の 100% ではなく 100% を把握できない理由についてはよくわかりません。

于 2013-09-01T19:47:11.060 に答える
1

そのセクションの高さを常に 100% にしたい場合は、min-height: 100%代わりにheight: 100%. そうでない場合は、親に高さ (html など) を指定してから、 を使用する必要がありますheight: 100%。

于 2013-09-01T19:46:06.353 に答える
1

この動作の背後にある理論は、ウィンドウの 100% の高さを要素で埋めたい場合、そのような要素の親もブラウザー ウィンドウの 100% を埋めなければならないということです。

100% の高さを設定している場合、正確には何の 100% かを尋ねる必要があります。

答えは親です。

もちろん、これはドキュメントの「フロー」にないposition: absoluteorのない要素にも当てはまります。position: fixed

問題の図は、私のフィドルで非常に明確に見られます: http://jsfiddle.net/AVKnJ/

少し啓発されることを願っています。

編集：

これは望ましい動作ですか？

実際height: 100%、コンテナー (html、本文) とmin-height: 100%、ウィンドウの高さを超えると予想される要素に使用する必要があります。

http://jsfiddle.net/7jDFD/15/

于 2013-09-01T21:04:21.050 に答える