Html 如何获得固定导航与内容的全高度部分？

我被困在这里，我想使固定导航与全高度部分的内容，但第二部分是不好后滚动，需要帮助

下面是我的代码：

*，
*：：之后，
*：：之前{
边际：0px；
填充：0px；
框大小：继承；
-webkit框大小：继承；
}
身体，
html{
边际：0px；
填充：0px；
框大小：边框框；
-webkit框大小：边框框；
}
导航{
位置：固定；
顶部：0px；
左：0px；
宽度：100%；
文本对齐：居中；
填充：10px 0px；
背景：番茄；
}
导航ul{
边际：0px；
填充：0px；
列表样式：无；
文本对齐：居中；
}
李国荣{
显示：内联块；
保证金：3倍；
}
海军ulli a{
显示：块；
填充物：5px；
背景：#000；
颜色：#ddd；
文字装饰：无；
}
导航ulli a：悬停{
背景：ddd；
颜色：#333；
}
部分{
高度：100vh；
背景:#303030；
边际：0px；
填充：0px；
}
第p节{
边缘顶端：54px；
颜色：#fff；
}
第1节绿色{
背景：绿色；
高度：100vh；
边际：0px；
填充：0px；
}
第3.p节绿色{
颜色：#ddd；
}

Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责。


Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责。

您有嵌套的

，不推荐使用，更好的方法应该是将外部

替换为

..

然后使用

包装器

类设置

页边距顶部：54px

，这是导航的高度

.wrapper {
    margin-top: 54px;
    height: 100vh;
    background: #303030;
    padding: 0px;
}

对于重叠，使用

calc

动态设置高度

height:calc（100vh-52px）


*，
*：：之后，
*：：之前{
边际：0px；
填充：0px；
框大小：继承；
-webkit框大小：继承；
}
身体，
html{
边际：0px；
填充：0px；
框大小：边框框；
-webkit框大小：边框框；
}
导航{
位置：固定；
顶部：0px；
左：0px；
宽度：100%；
文本对齐：居中；
填充：10px 0px；
背景：番茄；
}
导航ul{
边际：0px；
填充：0px；
列表样式：无；
文本对齐：居中；
}
李国荣{
显示：内联块；
保证金：3倍；
}
海军ulli a{
显示：块；
填充物：5px；
背景：#000；
颜色：#ddd；
文字装饰：无；
}
导航ulli a：悬停{
背景：ddd；
颜色：#333；
}
部分{
高度：100vh；
背景:#303030；
边际：0px；
填充：0px；
}
.包装纸{
边缘顶端：54px；
高度：100vh；
背景:#303030；
填充：0px；
}
第p节{
颜色：#fff；
}
第1节绿色{
背景：绿色；
高度：计算（100vh-52px）；
边际：0px；
填充：0px；
}
第3.p节绿色{
颜色：#ddd；
}







Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责。


Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责。

您可以使用
calc（）
计算截面高度


因此，这将使每个部分的高度等于屏幕高度减去导航高度


要删除节之间的空间，您需要从
p
标记中删除
margin top
，并添加
padding top:54px
到集装箱，同样
54px
是导航的高度，并且是在导航之后开始的区段的高度


*，
*：：之后，
*：：之前{
边际：0px；
填充：0px；
框大小：继承；
-webkit框大小：继承；
}
身体，
html{
边际：0px；
填充：0px；
框大小：边框框；
-webkit框大小：边框框；
}
.集装箱{
高度：100vh；
填充顶部：54px；
}
导航{
位置：固定；
顶部：0px；
左：0px；
height: calc(100vh - 54px); /*54px is the height of the nav*/