Question

我正在尝试制作一个幻灯片列表，其中包含内容，与Foo Fighter的内容非常类似，在他们的网站上：http://www.foofighters.com/us/discography

我想弄清楚的主要问题是如何在调整浏览器大小时让每个“幻灯片”自动调整为适当的高度。您可以在我链接的唱片页面上自行查看。有没有办法实现这个目标？我假设它会是一个javascript / jquery的东西。

Answer 1

重要的是要知道要在块元素上具有100％的高度，所有父项也必须设置为100％高度。

例如，我的if 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％动态高度的关键。

Answer 2

获取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

将div的高度设置为浏览器的高度

2 个答案: