如何自動調整div的高度至瀏覽器窗口的高度

如何根據瀏覽器的高度自動調整div標籤的高度？
當我做height: 100%時，它只根據文本內容的大小來調整大小。如何自動調整div的高度至瀏覽器窗口的高度

這裏是網頁，它是第一個div中，一個用藍色背景是，我試圖讓高度自動調整的一個：
http://rachelchaikof.com/awareness/

2012-12-08 user1869585

其實你必須失去了設置的height: 100%;的父元素，還要確保您使用此，讓您的div高度100％

html, body { 
    height: 100%; 
    width: 100%; 
}

來源

2012-12-08 07:51:39

本身，這不適用於標準模式（即使用適當的DOCTYPE）。 –

@MrLister它確實有效，誰說沒有？ –

@MrLister檢查了這個http://jsfiddle.net/3RTBU/ –

height:100%意味着相同的高度父，也就是元素的div坐在所以，如果你想它一樣高t作爲瀏覽器，你需要將其全部的祖先100%設置爲高，一直到html！

來源

2012-12-08 07:52:02

100% height - resize window problem

「高度：100％」是指在瀏覽器窗口的100％。如果頁面超出瀏覽器窗口（即需要滾動訪問），頁面的這些位在設置爲高度的元素之外：100％。如果您有背景或其他效果（例如邊框），則不會超出前100％。

The correct way to handle things is 
selector {min-height: 100%;} /* for proper browsers */ 
* html selector {height: 100%;} /* for IE */

如果以這種方式使用最小高度，你必須確保所有的前提要素具有的100％（即HTML &體）的固定高度。

或者你可以使用jquery。

$(window).resize(function() { 
    $('body').prepend('<div>' + $(window).width() + '</div>'); 
});

來源

2012-12-08 07:53:11 Moiz

當談到響應式設計時，有很多創造性的方法來解決這個問題。

您可以嘗試使用百分比來使您的設計更具響應能力。使用百分比是使用戶視口最大化的安全選擇。

例如。

html, body { 
height: 100%; 
width: 100%; 
}

從那裏你可以玩你的網站容器和更具體。

而且一些JavaScript的HTML的頭部部分可以幫助您檢測屏幕尺寸，並相應地調整不同的CSS規則：

<!-- hide script from old browsers 
//<![CDATA[ 

var windowWidth=screen.availWidth; 
var windowHeight=screen.availHeight 

function sniffer() { 
var el=document.getElementById("body"); 
if(screen.width<=600) { 
      el.style.width='100%'; 
      el.style.height= windowHeight; 
      el.style.margin="auto";    
} 
} 
onload=sniffer; 
//]]> 
// end hiding script from old browsers -->

中的JavaScript以上檢查如果用戶的屏幕小於或等於600px的;如果是這樣，它將調整body元素的寬度，高度和邊距規則。

希望這會有所幫助！

來源

2012-12-08 09:38:43

如何自動調整div的高度至瀏覽器窗口的高度

回答

相關問題