将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的高度设置为浏览器的高度

回答

相关问题