0

幅 960px の div を持つ CSS レイアウトを作成しています。ページの上部から下部まで届くようにしたいと考えています。明らかな解決策は ですmin-height: 100%;が、うまくいきません。これが私のCSSです：

* {
margin: 0px;
padding: 0px;
}
body {
background: #FF0000;
height: 100%;
}
html {
height: 100%;
}
#sheet {
width: 960px;
min-height: 100%;
background: #000000;
margin: 0px auto 0px auto;
}
#sheet1 {
width: 760px;
min-height: 100%;
top: 0px;
bottom: 0px;
background: #FFFFFF;
}

そして私のHTMLから：

<div id="sheet">
    <div id="sheet1">

    </div>
</div>

#sheet を に変更すると問題なく表示されますmin-heightがheight、コンテンツが 1 ページを超えると途切れてしまいます。これに対する解決策はありますか？

4

3 に答える 3

1

#sheetをmin-height100％ではなくheight：100％に変更し、＃sheet-1内にコンテンツを追加してみてください。

于 2012-12-18T02:20:54.573 に答える
0

floatまたはclearプロパティを追加しないため...

CSSは無視しmin-height、max-heightプロパティheightが定義されていない場合は、

あなたが追加する場合を除いてdisplay:inline-block、しかしそれはあなたを壊す可能性がmargin:0px auto;あり、私はあなたがこのようにすることを決定します：

* {
  margin: 0px;
  padding: 0px;
 }
body {
 background: #FF0000;
 height: 100%;
 text-align:center;
}
body * {
 text-align:left;
}
html {
 height: 100%;
}
#sheet {
 width: 960px;
 display:inline-block; // It can make height auto
 min-height: 100%;
 background: #000000;
 margin: 0px auto 0px auto;
 text-align:center;
}
#sheet1 {
 width: 760px;
 display:inline-block;
 min-height: 100%;
 background: #FFFFFF;
 text-align:left;
}

あなたのcssを私のコードに置き換えてください、そして私はそれがうまくいくはずだと思います...

于 2012-12-18T02:53:02.517 に答える
0

100% を使用すると、HTML 要素 (テキスト、画像、またはその他の要素) が存在する場合にのみ有効になります。その高さは、要素の長さに応じて高くなったり短くなったりします。したがって、min-height は、要素の長さまたは高さの正確な数のみを指定するために使用されます。パーセンテージではなくピクセルを使用してみてください。

于 2012-12-18T02:01:02.213 に答える