Html 如何创建占据整个屏幕并在滚动时折叠为标题的div

我想创建一个div，它跨越我设备的整个不动产，就像

我尝试创建一个固定高度的收割台，但无法在收割台下方创建div以跨越剩余高度

//Fixed Header
 .fixed-nav {
    position: fixed;
    width: 100%;
    height: 69px;
    background-color: #f2333a;
}

.x-div {
    position: relative;
    height: 100%;
    background-color: #F2333A;
    z-index: 10;
}

---

如果您希望导航下方的div跨越剩余高度，请使用

height:calc（100vh-69px）

，其中69px可以是任何固定高度对象的高度

正文{
保证金：0；
}
.集装箱{
宽度：100%；
高度：100vh；
位置：相对位置；
}
.固定导航{
宽度：100%；
高度：69px；
背景色：红色；
颜色：白色；
位置：固定；
排名：0；
左：0；
z指数：1000；
}
.标题{
宽度：100%；
高度：计算（100vh-69px）；
位置：绝对位置；
左：0；
底部：0；
背景色：红色；
z指数：1；
保证金：0；
}
.更多内容{
高度：100vh；
宽度：100%；
利润率：20px；
}

导航
网页的其余部分

如果标题占据了屏幕的整个高度，那么“剩余高度”是什么意思？请参阅：和@symlink如果您查看我在上面发布的链接，您将看到它有一个固定高度的标题，下面有一个div，跨越剩余高度和可滚动高度。我说的是第二组