我們經(jīng)常會(huì)用到div高度自適應(yīng)，但是經(jīng)常不兼容啊，下面我來(lái)介紹div高度自適應(yīng)方法總結(jié)，有需要的朋友可參考參考。
看下面代碼:
| 代碼如下 |
復(fù)制代碼 |
|
<style type="text/css">
.mytest
{
width:100px;
height:100px;
border:1px solid green;
}
</style>
<div class="mytest">據(jù)英國(guó)《每日電訊報(bào)》11月30日?qǐng)?bào)道，以色列安全內(nèi)閣當(dāng)天批準(zhǔn)在約旦河西岸和東耶路撒冷猶太人定居點(diǎn)新建3000套住房，此舉旨在抗議聯(lián)合國(guó)29日批準(zhǔn)給與巴勒斯坦觀察員國(guó)地位。巴以和談進(jìn)程也因此蒙上巨大</div>
</body>
</html>
|
以上代碼中固定了div的高度為100px，如果內(nèi)容的高度超過(guò)100px的話，除了在IE6下能夠達(dá)到高度自適應(yīng)，其他瀏覽器都會(huì)出現(xiàn)內(nèi)容溢出的現(xiàn)象，顯示不能夠達(dá)到我們想要的效果，下面就來(lái)修改一下代碼 。
| 代碼如下 |
復(fù)制代碼 |
|
<style type="text/css">
.mytest
{
width:100px;
height:auto!important;
height:100px;
min-height:100px;
border:1px solid green;
}
</style>
|
<div class="mytest">據(jù)英國(guó)《每日電訊報(bào)》11月30日?qǐng)?bào)道，以色列安全內(nèi)閣當(dāng)天批準(zhǔn)在約旦河西岸和東耶路撒冷猶太人定居點(diǎn)新建3000套住房，此舉旨在抗議聯(lián)合國(guó)29日批準(zhǔn)給與巴勒斯坦觀察員國(guó)地位。巴以和談進(jìn)程也因此蒙上巨大陰</div>
</body>
</html>以上代碼通過(guò)運(yùn)用!important和min-height屬性實(shí)現(xiàn)了各個(gè)瀏覽器都能夠達(dá)到高度自適應(yīng)效果。
上面都是介紹的是div中都是文本內(nèi)容的情況，但是還有可能是div中存有子div的情況，下面簡(jiǎn)單介紹一下此種情況。先看一實(shí)例:
| 代碼如下 |
復(fù)制代碼 |
|
<style type="text/css">
.parent
{
border:2px solid red;
width:200px;
}
.children
{
width:200px;
height:200px;
background-color:green;
}
</style>
<div class="parent">
<div class="children"></div>
</div>
|
以上代碼中，父元素只規(guī)定了寬度沒(méi)有規(guī)定高度，子元素在正常的文檔流中，所以子元素能夠?qū)⒏冈負(fù)伍_。
再看下面這一實(shí)例:
| 代碼如下 |
復(fù)制代碼 |
|
<style type="text/css">
.parent
{
border:2px solid red;
width:200px;
}
.children
{
width:200px;
height:200px;
float:left;
background-color:green;
}
</style>
<div class="parent">
<div class="children"></div>
</div>
|
從上面代碼的運(yùn)行可以看出，父元素并沒(méi)有被撐開，這個(gè)是因?yàn)樽釉豧loat屬性值設(shè)置為left，從而脫離了文檔流。如果想讓上面的父元素達(dá)到高度自適應(yīng)，就要清除子元素的浮動(dòng)。修改代碼如下:
| 代碼如下 |
復(fù)制代碼 |
|
<style type="text/css">
.parent
{
border:2px solid red;
width:200px;
overflow:hidden;
}
.children
{
width:200px;
height:200px;
float:left;
background-color:green;
}
</style>
<div class="parent">
<div class="children"></div>
</div>
|
以上代碼通過(guò)給父元素的樣式中添加overflow:hidden即可清除浮動(dòng)。
如果說(shuō)父元素就像最開始的例子一樣，固定了高度，并且還要實(shí)現(xiàn)高度自適應(yīng)效果，就可以參閱元素中內(nèi)容是文本的情況，解決方法是一樣的。代碼如下:
| 代碼如下 |
復(fù)制代碼 |
|
<style type="text/css">
.parent
{
border:2px solid red;
width:200px;
height:auto!important;
height:100px;
min-height:100px;
}
.children
{
width:200px;
height:200px;
float:left;
background-color:green;
}
.clear
{
clear:both;
}
</style>
<div class="parent">
<div class="children"></div>
<div class="clear"></div>
</div>
|
上面講述的都是css,我另外介紹一通過(guò)js的方法，原理是js獲取兩個(gè)子div的高度然后比較哪個(gè)大，然后分別設(shè)置div的高度,下面的實(shí)例演示3列式的。
js代碼如下：
| 代碼如下 |
復(fù)制代碼 |
|
<script>
var a=Math.max(document.getElementById("left").offsetHeight,document.getElementById("center").offsetHeight,document.getElementById("right").offsetHeight); //獲取3個(gè)div的最大高度
document.getElementById("left").style.height = a + "px";
document.getElementById("center").style.height = a + "px";
document.getElementById("right").style.height = a + "px";
</script>
|
需要注意的是這個(gè)js代碼請(qǐng)放在頁(yè)面底部
