怎樣讓一個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高度自適應瀏覽器高度的方法:
1、獲取到window的innerHeight、clientHeight根據這兩個引數定義div的高度。
function resizeElementHeight(element) {
var height = 0;
var body = window.document.body;
if (window.innerHeight) {
height = window.innerHeight;
} else if (body.parentElement.clientHeight) {
height = body.parentElement.clientHeight;
} else if (body && body.clientHeight) {
height = body.clientHeight;
}
element.style.height = ((height - element.offsetTop) + "px");
}
2、定義div的高度的方法:
document.getElementById("yourDiv").height = height;

解決方法是:
1, html,body{height:100%} container{position:absolute;top:0;left:0;min-height:100%;height:auto}切記,height:auto不能height:100%。用height:100%,
2,當container的內容高度小於瀏覽器的沒出現問題,但當container的內容高度大於瀏覽器的高度時你會發現container的height並沒有隨著內容高度而自適應。最後說一下height:100% 並不是沒用的東西,,
3,用到不對的位置就是沒用的東西了.

求助,解決div自適應瀏覽器高度

我已經加你扣扣了,你這個有好多種辦法可以解決

<script>    function setContentHeight (){        var web_subnav = document.getElementById( "web-subnav" );        var height = document.documentElement.clientHeight - 40 - document.getElementById("web-topbd").offsetHeight;        web_subnav.style.height = height + 'px';    }    window.onload = setContentHeight;    window.onresize = setContentHeight;</script>

給 web-subnav 和 web-topbd 加 id

Safari瀏覽器下怎麼實現iframe高度自適應

實現 iframe 的自適應高度,能夠隨著頁面的長度自動的適應以免除頁面和 iframe 同時出現滾動條的現象。
<script type="text/javascript">
//** iframe自動適應頁面 **//
//輸入你希望根據頁面高度自動調整高度的iframe的名稱的列表
//用逗號把每個iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一個窗體,則不用逗號。
//定義iframe的ID
var iframeids=["test"]
//如果使用者的瀏覽器不支援iframe是否將iframe隱藏 yes 表示隱藏,no表示不隱藏
var iframehide="yes"
function dyniframesize()
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++)
{
if (document.getElementById)
{
//自動調整iframe高度
dyniframe[dyniframe.length] = document.getElementById(iframeids);
if (dyniframe && !window.opera)
{
dyniframe.style.display="block"
if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果使用者的瀏覽器是NetScape
dyniframe.height = dyniframe.contentDocument.body.offsetHeight;
else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果使用者的瀏覽器是IE
dyniframe.height = dyniframe.Document.body.scrollHeight;
}
}
//根據設定的引數來處理不支援iframe的瀏覽器的顯示問題
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="block"
}
}
}
if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.onload=dyniframesize
</script>

怎樣讓你的div自適應瀏覽器和內容兩個高度呢?

之前我只站在我的最高解析度的角度站去寫,把container的min-height設定達到最佳效果。卻忽略了,如果大於我的最高解析度時,這時container的min-heihgt就不能滿足了!給container設height:100%,結果不行,我有點懷疑height:100%根本就沒用的東西。在這個問題上,給container設min-heihgt:xpx肯定是不行了。查了很多資料,在他們提到的基本上很多都是html,body{height:100%;} container{height:100%;}。依照他們的方法依然沒有效果,container改成{height:100%;min-height:100%}一樣沒有效果。 其實這個問題歸結就是讓container自適應瀏覽器和內容兩個高度。照常規的,當有背景圖的時候我們都會直接放在body層,誰會去考慮container的高度到底是多高?此次專案,有兩個背景圖, 在我想到這個方法時,也是受到別人相似的方法啟發。自己寫了一個小的測試 當div為相對定位position:absolute的時候,我們給它設height:100%;它會自適應瀏覽器的高度。因此,在這我的解決方法是: html,body{height:100%} container{position:absolute;top:0;left:0;min-height:100%;height:auto}切記,height:auto不能height:100%。用height:100%,當container的內容高度小於瀏覽器的沒出現問題,但當container的內容高度大於瀏覽器的高度時你會發現container的height並沒有隨著內容高度而自適應。最後說一下height:100% 並不是沒用的東西,呵呵,用到不對的位置就是沒用的東西了! 好了,自認為是挺不錯的一種解決方法......哈哈!我覺得呢碰到的問題越多,學習才會有勁,學到的也會越多,吸收的也會越多。

點選檢視隱藏內容

本文內容整理自網路, 文中所有觀點看法不代表問咩的立場