最小身高：100％？

我正在製作一個960像素寬的div的CSS佈局，我希望它從頁面頂部到達底部。明顯的解決方案是min-height: 100%;，但它不起作用。這裏是我的CSS：最小身高：100％？

* { 
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>

它顯示正常，當我改變＃片的min-height到height，但隨後會得到切斷，如果內容佔去了超過一頁。有沒有解決方案？

來源

2012-12-18 tkbx

同時使用最小高度和高度 – mymlyn

嘗試將#sheet更改爲高度：100％，而不是最小高度100％，並在＃sheet-1內添加一些內容。

來源

2012-12-18 02:20:54 mToce

僅當存在HTML元素（文本，圖像或其他元素）時，使用100％纔會生效。根據元素的長度它的高度會更高或更低。因此min-height僅用於指定元素的長度或高度的確切數量。嘗試使用像素而不是百分比。

來源

2012-12-18 02:01:02

但像素和百分比是不同的原因，我希望它是100％的瀏覽器窗口的高度。 – tkbx

嘗試使用固定高度的外部div和高度100％作爲inner內容，然後內容不會將外部div降低到比您設置的更高，否則使用overflow：hidden來防止這種情況。 –

因爲你不添加任何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，用我的代碼，我瘦k它應該工作...

來源

2012-12-18 02:53:02

最小身高：100％？

回答

相關問題