我想创建一个与浏览器窗口一样大的DIV,然后使用垂直滚动显示网站.我正在寻找的效果类似于本页中的效果(注意总是与浏览器窗口一样大的大横幅,以及底部的内容):
记住这个HTML:
<div class="banner">
This banner is always big like the browser window
</div>
<div class="content">
Content of the website
</div>
这是一种方法:
.banner {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: red;
}
.content {
width: 100%;
position: relative;
background-color: green;
}
问题是,如果我对此DIV使用绝对位置,我的网站内容从页面顶部开始,并被横幅隐藏.
有没有办法在不使用javascript的情况下实现这一点？
提前致谢
解决方案：小提琴
CSS：
html,body {
height:100%;
margin:0;
padding:0;
}
.banner {
height:100%;
background-color: red;
}
.content {
background-color: green;
}
解释 ：
关键是要获得适合整个窗户尺寸的底座。您可以通过将<body>和<html>标签设置为 100% 高度来获得此基础（默认情况下它们会扩展总宽度）。然后它们扩展到父窗口的 100% 高度。
因此，您不再需要绝对位置来调整窗口等元素的大小。
您可以对第一级子项（在您的情况下.banner）使用 100% 高度，以使它们适合窗口的总高度。您不必在大多数元素上设置 100% 宽度，因为它们会自动扩展整个宽度（块元素，例如divs 这样的块元素不浮动且处于相对或静态位置）。
您的页面将保持默认位置，并且您的.contentdiv 将在窗口大小下方开始.banner
| 归档时间： |
|
| 查看次数： |
1411 次 |
| 最近记录： |