SEARCH !!

2010/03/01

想要高度100%的div

想要高度100%的div
關鍵在於父元素需指定 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;
}

沒有留言:

張貼留言