Html DIV与浏览器窗口一样大，没有javascript

我想创建一个与浏览器窗口一样大的DIV，然后使用垂直滚动显示网站。我正在寻找的效果与中的效果类似（请注意，大横幅始终与浏览器窗口一样大，并且底部的内容）：

记住此HTML：

<div class="banner">
   This banner is always big like the browser window
</div>

<div class="content">
   Content of the website
</div>

问题是，如果我使用这个DIV的绝对位置，我的网站内容从页面顶部开始，被横幅隐藏

有没有不使用javascript的方法来实现这一点

提前感谢

解决方案：

CSS:

说明：

关键是要得到一个适合总窗口大小的底座。您可以通过将

和

标记设置为100%高度（默认情况下，它们会扩展总宽度）来获得此基准。然后它们扩展到父窗口的100%高度

因此，您不再需要绝对位置来调整winow等元素的大小

您可以在第一级子项上使用100%的高度（在您的情况下为

.banner

）使其适合总窗口高度。您不必在大多数元素上设置100%宽度，因为它们会自动扩展整个宽度（块元素，如

div

s，不浮动且处于相对或静态位置）

您的页面将保持默认位置，并且您的

.content

div将从窗口大小

下开始。横幅
尝试以下操作：

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


.横幅{
背景色：红色；
保证金：0px 0px 0px 0px；
填充：0px；
}
.内容{
宽度：100%；
保证金：10px 0px 0px 0px；
填充：0px；
背景颜色：绿色；
身高：100%；
}
为什么
横幅上有
底部：0px
？你不想让它一直到底部，是吗？旗帜有多高？如果横幅是50px高，您可以只添加
margintop:50px
到您的
.content
@user3360873我的答案是否满足您的要求？如果您的问题已解决，请勾选接受：）
html,body {
    height:100%;
    margin:0;
    padding:0;
}
.banner {
    height:100%;
    background-color: red;
}
.content {
    background-color: green;
}

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