高度自適應(yīng)
網(wǎng)頁布局中經(jīng)常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據(jù)窗口或子元素自動調(diào)整，這就是自適應(yīng)。
元素自適應(yīng)在網(wǎng)頁布局中非常重要，它能夠使網(wǎng)頁顯示更靈活，可以適應(yīng)在不同設(shè)備、不同窗口和不同分辨率下顯示。
 
1)元素高度自適應(yīng)窗口高度
設(shè)置方法：html,body{height:100%;}
需要自適應(yīng)的元素： height:100%;
 
2)自適應(yīng)元素高度：
父元素：height：value；
 需要自適應(yīng)父元素高度的子元素： height:100%;
height:auto，是指根據(jù)塊內(nèi)內(nèi)容自動調(diào)節(jié)高度。
height:100%，是指其相對父塊高度而定義的高度，也就是按照離它最近且有定義高度的父層的高度來定義高度。
3)浮動元素父元素高度自適應(yīng)（高度塌陷）
hack1：給父元素添加聲明overflow:hidden;
hack2：在浮動元素下方添加空div,并給該元素添加聲明：clear:both;height:0;overflow:hidden;font-size:0;
hack3：萬能清除浮動法
:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
*visibility:hidden/visible;隱藏/可見
*visibility:hidden;和display:none;的區(qū)別：
visibility:hidden;屬性會使對象不可見，但該對象在網(wǎng)頁所占的空間沒有改變，等于留出了一塊空白區(qū)域，而 display:none屬性會使這個對象徹底消失。
4)JS函數(shù)來實現(xiàn)DIV高度隨瀏覽器窗口的高度自適應(yīng)變化
<div id="test" style=" border: solid 1px #f00; "></div>
<script type="text/javascript">
<!--
autodivheight();
function autodivheight(){ //函數(shù)：獲取尺寸
    //獲取瀏覽器窗口高度
    var winHeight=0;
    if (window.innerHeight)
        winHeight = window.innerHeight;
    else if ((document.body) && (document.body.clientHeight))
        winHeight = document.body.clientHeight;
    //通過深入Document內(nèi)部對body進行檢測，獲取瀏覽器窗口高度
    if (document.documentElement && document.documentElement.clientHeight)
        winHeight = document.documentElement.clientHeight;
    //DIV高度為瀏覽器窗口的高度
    //document.getElementById("test").style.height= winHeight +"px";
    //DIV高度為瀏覽器窗口高度的一半
    document.getElementById("test").style.height= winHeight/2 +"px";
}
window.onresize=autodivheight; //瀏覽器窗口發(fā)生變化時同時變化DIV高度
</script>
 
左右div高度自適應(yīng)
htmlcode:
<div id="container"> 
<dividdivid="leftSide">這邊的高度自適應(yīng)右側(cè)的高度</div> 
<dividdivid="rightSide"> 
<scripttypescripttype="text/javascript"> 
for(i=0;i<10;i++){  
document.write(i+'<br>');  
}  
</script> 
</div> 
</div> 
 
可用的方法大概有以下四種：
1，用absolute設(shè)置一個足夠高的高度，在父級元素中清除溢出的部分,具體的csscode如下：
#container{font-size:14px;width:300px;overflow:hidden;  
border:3pxsolidblue;margin:10pxauto0;  
color:#fff;position:relative;}  
#leftSide{width:100px;float:left;height:200000px;  
left:0;top:0;position:absolute;background:gray;}  
#rightSide{width:190px;float:right;  
text-align:center;background:purple;}  
其實這種方法并沒有真正的實現(xiàn)左右兩個div等高，只是用了障眼法，利用container的overflow:hidden清除了左側(cè)多余的部 分，以達到視覺上左右等高的目的，雖然有“白貓黑貓，逮著老鼠就是好貓”的說法，但是筆者并不著重推薦這種方法，因為給父級元素添加relative，會 帶來很多不必要的麻煩，況且只能是設(shè)置absolute的一側(cè)自適應(yīng)另一側(cè)的高度，并不能讓兩側(cè)中任一側(cè)去自由去適應(yīng)另一側(cè)！
2，負外補丁和正內(nèi)補丁{margin-bottom:-(num)px;padding-bottom:(num)px;}相結(jié)合
#container{font-size:14px;width:300px;overflow:hidden;  
border:3pxsolidblue;margin:10pxauto0;color:#fff;}  
#leftSide{width:100px;float:left;background:gray;  
padding-bottom:9999px;margin-bottom:-9999px;}  
#rightSide{width:190px;float:right;text-align:center;  
background:purple;padding-bottom:9999px;  
margin-bottom:-9999px;}  
3，利用javascript腳本實現(xiàn)動態(tài)設(shè)置高度
<scripttypescripttype="text/javascript"> 
varleft=document.getElementById('leftSide');  
varright=document.getElementById('rightSide');  
if(left.offsetHeight>=right.offsetHeight){  
right.style.height=left.offsetHeight+'px';  
}else{  
left.style.height=right.offsetHeight+'px';  
}  
</script> 

方維網(wǎng)絡(luò)不但支持網(wǎng)站整站定制，如果你們公司自己有設(shè)計師，也可以自己設(shè)計網(wǎng)頁效果圖，然后由我們來完成后面的前端制作和程序開發(fā)工作。
 
作者：方維網(wǎng)絡(luò)樂文慶