logo标签列表

不使用Javascript实现 DIV 充满整个浏览器窗口

htmlcss
5
我想创建一个与浏览器窗口一样大的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就可以实现这个的方法？提前感谢。
1
为什么 .banner 上有一个 bottom: 0px？你不想将其一直拉到底部，对吗？横幅高多少？如果横幅高度为50像素，则可以在 .content 中添加 margin-top: 50px;。 - vtamm
@user3360873，我的回答是否满足了您的要求？如果您的问题已经解决，请勾选接受 :) - web-tiki
2个回答
4
Solution: FIDDLE CSS:
html,body {
    height:100%;
    margin:0;
    padding:0;
}
.banner {
    height:100%;
    background-color: red;
}
.content {
    background-color: green;
}

解释：

关键在于获得适合整个窗口大小的基础。您可以通过将<body>和<html>标签设置为100%高度（它们默认扩展总宽度）来获得此基础。然后，它们会扩展到父窗口的100％高度。

因此，您不再需要绝对定位来调整元素大小，就像窗口一样。

您可以在第一级子元素上使用100％的高度（在您的情况下是.banner），以使它们适应整个窗口高度。大多数元素不需要设置100％的宽度，因为它们会自动扩展整个宽度（如div等不浮动并处于相对或静态位置的块状元素）。

您的页面将保持默认定位，您的.content div 将从窗口大小的.banner之下开始。

0

试试这个：

<style>
.banner {

background-color: red;
margin: 0px 0px 0px 0px;
padding: 0px;
}

.content {
width: 100%;
margin: 10px 0px 0px 0px;
padding: 0px;
background-color: green;
height: 100%;

}
</style>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接