高度自適應
網頁布局中經常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據窗口或子元素自動調整，這就是自適應。
元素自適應在網頁布局中非常重要，它能夠使網頁顯示更靈活，可以適應在不同設備、不同窗口和不同分辨率下顯示。
1)元素高度自適應窗口高度
設置方法：html,body{height:100%;}
需要自適應的元素：height:100%;
2)自適應元素高度：
父元素：height：value；
需要自適應父元素高度的子元素：height:100%;
height:auto，是指根據塊內內容自動調節高度。
height:100%，是指其相對父塊高度而定義的高度，也就是按照離它最近且有定義高度的父層的高度來定義高度。
3)浮動元素父元素高度自適應（高度塌陷）
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;的區別：
visibility:hidden;屬性會使對象不可見，但該對象在網頁所占的空間沒有改變，等于留出了一塊空白區域，而display:none屬性會使這個對象徹底消失。
4)JS函數來實現DIV高度隨瀏覽器窗口的高度自適應變化
<divid="test"style="border:solid1px#f00;"></div>
<scripttype="text/javascript">
<!--
autodivheight();
functionautodivheight(){//函數：獲取尺寸
//獲取瀏覽器窗口高度
varwinHeight=0;
if(window.innerHeight)
winHeight=window.innerHeight;
elseif((document.body)&&(document.body.clientHeight))
winHeight=document.body.clientHeight;
//通過深入Document內部對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;//瀏覽器窗口發生變化時同時變化DIV高度
</script>
左右div高度自適應
htmlcode:
<divid="container">
<dividdivid="leftSide">這邊的高度自適應右側的高度</div>
<dividdivid="rightSide">
<scripttypescripttype="text/javascript">
for(i=0;i<10;i++){
document.write(i+'<br>');
}
</script>
</div>
</div>
可用的方法大概有以下四種：
1，用absolute設置一個足夠高的高度，在父級元素中清除溢出的部分,具體的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;}
其實這種方法并沒有真正的實現左右兩個div等高，只是用了障眼法，利用container的overflow:hidden清除了左側多余的部 分，以達到視覺上左右等高的目的，雖然有“白貓黑貓，逮著老鼠就是好貓”的說法，但是筆者并不著重推薦這種方法，因為給父級元素添加relative，會 帶來很多不必要的麻煩，況且只能是設置absolute的一側自適應另一側的高度，并不能讓兩側中任一側去自由去適應另一側！
2，負外補丁和正內補丁{margin-bottom:-(num)px;padding-bottom:(num)px;}相結合
#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腳本實現動態設置高度
<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>
創新互聯不但支持網站整站定制，如果你們公司自己有設計師，也可以自己設計網頁效果圖，然后由我們來完成后面的前端制作和程序開發工作。

網頁名稱：網站前端制作之htmldiv高度自適應
網頁URL：http://m.newbst.com/news13/240163.html

成都網站建設公司_創新互聯，為您提供移動網站建設、域名注冊、網站導航、微信公眾號、服務器托管、外貿建站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯