Html 页面底部的空白

我正在使用Flexbox创建一个包含主要内容区域和导航栏的基本页面布局。出于某种原因，我的主容器不会占用页面的全部空间，而只是将内容包装在其内部。在较大尺寸的视口中，主容器下面有一堆空白。我已经尝试了我能想到的一切，包括将所有容器的高度设置为100%，但似乎没有任何效果。这是我的密码：

HTML:

CIS 111
HTML5简介
lorem ipsum诸如此类诸如此类
CIS 146
编程入门
lorem ipsum诸如此类诸如此类
CIS 114
前端开发
lorem ipsum诸如此类诸如此类
CIS 130
自适应网页设计
lorem ipsum诸如此类诸如此类
独联体126
数据库管理系统/SQL
lorem ipsum诸如此类诸如此类

CSS:

#第3页正文{
字体大小：16px；
}
#第3页内容旁白{
颜色：#FE51E9；
字体系列：“巴鲁·坦比2”，草书；
}
#第3页内容容器{
背景色：#717171；
边界半径：5px；
利润率：10px；
填充：10px；
}
#第3页内容标题{
颜色：白色；
字体系列：“Merriweather”，衬线；
字号：700；
}
#第3页内容提要{
颜色：白色；
字体系列：“巴鲁·坦比2”，草书；
}
#第3页主要内容{
显示器：flex；
弯曲方向：立柱；
边缘底部：5雷姆；
背景色：#C2C2；
}
#第3页导航栏{
底部：0；
身高：5雷姆；
宽度：100%；
位置：固定；
背景色：#323232；
过渡：300毫秒；
}
#页面3.导航栏：悬停{
高度：16雷姆；
}
#页面3.导航栏：悬停。链接文本{
显示：块；
}
#第3页链接文本：悬停{
颜色：#FE51E9；
}
#第3A页：悬停{
文字装饰：无；
}
#第3页链接文本{
显示器：flex；
弯曲方向：立柱；
颜色：白色；
显示：无；
}
#第3页导航图标{
颜色：#FE51E9；
}
#第3页导航栏导航{
显示器：flex；
弯曲方向：行；
填充：0；
保证金：0；
}
@介质（最小宽度：768px）{
#第3页主要内容{
弯曲方向：行；
柔性包装：包装；
证明内容：周围的空间；
页边距底部：0；
左边距：5雷姆；
}
#第3页导航栏{
显示器：flex；
弯曲方向：立柱；
身高：100%；
宽度：5雷姆；
位置：固定；
背景色：#323232；
过渡：300毫秒；
证明内容：周围的空间；
}
#页面3.导航栏：悬停{
宽度：16雷姆；
身高：100%；
}
}

尝试将此CSS规则添加到您的容器中

#page3 .contentContainer {
   min-height: 100vh;
}

vh

CSS单元使元素相对于屏幕的最小高度

---

单位表示相对于父容器的高度，如果父容器的行为取决于其内容（默认情况下，如

元素），则设置100%将不会给出所需的结果。

将最小高度设置为元素，例如：

main

标记

最小高度：100vh

或添加

---

这是可行的，但我的contentContainers现在太大了，而且太长了，而不是让主容器占据整个页面。有没有一种方法可以让主容器占据整个页面而不影响其子容器的大小？只需在我的主体中添加min height:100vh就可以满足我的需要！出于某种原因，我试图将该属性与其他属性结合起来以使其正确工作，我不认为只将其添加到主属性中。非常感谢。

html,body {
  min-height: 100%
}
main {
  height:100%;
}