0

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

我想弄清楚的主要事情是如何在调整浏览器大小时让每个“幻灯片”自动调整为适当的高度。你可以在我链接的唱片页面上自己查看。有没有办法做到这一点？我假设这将是一个 javascript/jquery 的东西。

4

2 回答 2

2

重要的是要知道块元素的高度为 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% 动态高度的关键。

于 2012-09-06T21:02:30.103 回答
1

将 adiv调整为浏览器窗口高度的示例：

<!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 替代方案：根据视口高度动态设置 DIV 高度

于 2012-09-06T19:45:28.770 回答