關鍵在於父元素需指定 height
不然只會以內容物來撐開
本例:
body裡面要有height:100%;
html裡面也要有height:100%; (IE6不需要)
<style type="text/css">
html, body {
height:100%;
}
#height100 {
background-color: #898989;
width:500px;
height:100%;
}
</style>
<div id="height100">
百分百高度
</div>
--------------------------------------------------
不過有時候IE6之外的瀏覽器會因為內容高度超過瀏覽器高度導致排版亂跑
解決辦法:
html, body {
height:100%;
}
#height100 {
background-color: #898989;
width:500px;
height:100%;
min-height:100%; /*IE6不認得min-heigh*/
}
body > #height100{ /*IE6不認得 > */
height:auto;
}
body > #height100{ /*IE6不認得 > */
height:auto;
}
沒有留言:
張貼留言