三種Div高度自適應的方法，div高度自適應

最後更新：2014-08-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

讓DIV高度自適應，這是在網頁設計中常遇到的問題，為了給大家提供參考，這裡提供3種div高度自適應的方法：一是JS法、二是背景圖填充法、三是“補丁大法”（比較變態）。

1、JS法

代碼如下。原理：用JS判斷左右DIV的高度，若不一致則設為一致。架構資源分享

Java代碼

<div style="width:500px;background:#cccccc;height:0px;">
<div id="right" style="width:380%;height:100%;float:left;border:1px solid #265492;">left</div>
<div id="left" style="width:60%;;float:left;background:#376037;">
right<br>
right<br>
right<br>
right<br>
right<br>
right<br>
right<br>
</div>
</div>
<script type="text/javascript">
<!--
var a=document.getElementById("left");
var b=document.getElementById("right");
if(a.clientHeight<b.clientHeight){
a.style.height=b.clientHeight+"px";
}else{
b.style.height=a.clientHeight+"px";
}
-->
</script>

這是大站用得比較多的方法，如163等，研究了一下，結果如下。2、背景圖填充法

這裡是給父DIV設定了背景圖片填充，所有DIV都不設高度。前端資源分享

HTML代碼：

Java代碼

<div class="endArea">
<div class="col1">第一列　左邊本文</div>
<div class="col3">第二列　右邊<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />字字</div>
<div class="col2">第三列　中間圖片</div>
<div class="clear"></div>
</div>

CSS代碼：

Java代碼

.endArea{margin:0 auto; width:960px; background:url(http://cimg2.163.com/cnews/img07/end_n_bg1.gif); clear:both;}
.endArea .col1{float:left; width:573px; }
.endArea .col2{float:left; width:25px; }
.endArea .col3{float:right; width:362px;}

3、補丁大法

就是“隱藏容器溢出”和“正內補丁”和“負外補丁”結合的方法。比較另類的方法，在IE6、IE7、FF3下測試通過。要點：

1、父DIV設定　overflow:hidden;架構資源分享

2、對要高度自適應的DIV設定　padding-bottom:100000px;margin-bottom:-100000px; 兩列或多列同理。

代碼如下：

Java代碼

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Div高度自適應</title>
<style type="text/css">
#wrap{overflow:hidden;}
#sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;}
</style>
</head>
<body>
<div id="wrap" style="width:300px; background:#FFFF00;">
<div id="sidebar_left" style="float:left;width:100px; background:#777;">居左</div>
<div id="sidebar_mid" style="float:left;width:100px; background:#999;">
置中<br />
置中<br />
置中<br />
置中<br />
置中<br />
置中<br />
置中<br />
</div><div id="sidebar_right" style="float:right;width:100px; background:#888;">居右</div></div>
</body>
</html>

以上三種方法都可以解決Div高度自適應，請根據你自己的需要，三選一

怎讓Div自適應高度

很鬱悶的一件事情是：有時你需要一個DIV根據裡面的元素自動適應高度，所以，你肯定無法給這個DIV定義一個實際高度。而你隨便嵌套一個DIV卻發現並不適應高度。這事就鬱悶了。下面給出一些方法。大致的例子是： <div id="main"><div id="content"></div></div>當Content內容多時，即使main設定了高度100%或auto。在不同瀏覽器下還是不能完好的自動伸展。內容的高度比較高了，但容器main的高度還是不能撐開。我們可以通過三種方法來解決這個問題。增加一個清除浮動，讓父容器知道高度。請注意，清除浮動的容器中有一個空格。<div id="main"><div id="content"></div><div style="font: 0px/0px sans-serif;clear: both;display: block"> </div></div> 增加一個容器，在代碼中存在，但在視覺中不可見。<div id="main"><div id="content"></div><div style="height:1px; margin-top:-1px;clear: both;overflow:hidden;"></div></div> 增加一個BR並設定樣式為clear:both。<div id="main"><div id="content"></div><br style="clear:both;" /></div>以上三個方法都不是最好的解決方案,因為在程式碼觀念中是提倡盡量不要添加無意義的標籤代碼。現在，你可以用下面的方法來實現DIV自適應高度效果#main {height:100%;

怎讓 div 高度自適應

問題一
main 其實不用定高度
如果子框 left center right 如果有浮動記得清除浮動這樣main 就會高度自適應了

問題二
寬度自適應可以讓 left right 分別向左和像右浮動 center不要浮動寬度就會自適應了

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

三種Div高度自適應的方法，div高度自適應

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support