將div的高度設置爲瀏覽器的高度

我正在嘗試製作一個幻燈片div的列表，其中包含的內容與Foo Fighter的其他內容非常相似，在其網站上：http://www.foofighters.com/us/discography 將div的高度設置爲瀏覽器的高度

我想弄清楚的主要問題是如何在瀏覽器調整大小時讓每個「幻燈片」自動調整爲適當的高度。您可以在我鏈接的唱片頁面上自己查看。有沒有辦法做到這一點？我假設這將是一個JavaScript/jQuery的東西。

2012-09-06 JackArrgon

知道有一個塊級元素上100％的高度是很重要的，所有的家長也必須設置爲100％的高度。

例如，如果HTML看起來我就像這樣：

<!DOCTYPE html> 
<html> 
<body> 

<div id="wrapper"> 
    <div id="myDiv">This is my div!</div> 
</div>  

</body> 
</html>

使myDiv 100％高度要求的CSS將

<style type="text/css"> 
    html, body, #wrapper, #myDiv { height: 100%; } 
</style>

通知所有#myDiv的父母也被設置到100％的高度。這是塊元素達到100％動態高度的關鍵。

來源

2012-09-06 21:02:30 Axel

謝謝！這工作。 – JackArrgon

得到一個div來調整到瀏覽器窗口的高度的一個例子：

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
html, body { 
    height: 100%; 
    background-color: black; 
    margin: 0; 
    padding: 0; 
} 
#mydiv { 
    height: 100%; 
    width: 400px; 
    background-color: white; 
    margin: auto; 
    text-align: center; 
} 
</style> 
</head> 
<body> 

<div id="mydiv">TEST</div> 

</body> 
</html>

測試在Chrome，IE9，Firefox和Opera，在Windows上運行的。 IE9需要指定DOCTYPE才能正常工作，其他瀏覽器似乎並不關心。

JQuery的選擇：Set DIV height dynamically based on viewport height

來源

2012-09-06 19:45:28

感謝您對IE的支持！這是否意味着我仍然可以使用<！DOCTYPE html>來使用IE，或者我需要使用W3School列出的其中一個。像1.0嚴格等 – JackArrgon

將div的高度設置爲瀏覽器的高度

回答

相關問題