Css html元素拉伸到剩余视图端口高度

所以我试着做下面的部分，导航会自动填充剩余的视图端口高度。部分包含一个居中的div和背景图片。底部有一个按钮，单击该按钮可向下滚动全视图端口高度。导航都是引导，但如果您需要更多详细信息，我将在此处添加导航：

文本1
文本2

您可以使用flexbox来填充可用空间，请参见下面的代码（CSS顶部是新的，其余部分不变）：

*{框大小：边框框；}
身体{
保证金：0；
显示器：flex；
对齐项目：拉伸；
弯曲方向：立柱；
高度：100vh；
}
navbar先生{
弹性：0；
}
.主要部分{
flex:1自动；
溢出：自动；
}
/*下面的代码没有更改*/
部分，主要部分{
背景色：#eeeeee；
位置：相对位置；
背景图片：url（images/Main3.jpg）；
背景重复：无重复；
背景尺寸：封面；
}
部门标识包装{
宽度：100%；
保证金：自动；
文本对齐：居中；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
部门标识包装。hFirst{
字号：600；
位置：相对位置；
字号：2rem；
字体：斜体；
线高：4rem；
垂直对齐：顶部；
宽度：自动；
}
div.logoWrap.hs秒{
位置：相对位置；
字号：700；
字号：4rem；
字体风格：普通；
线高：4rem；
}

文本1
文本2

请将您的完整代码作为申请表的一部分提供。还要注意的是，HTML5中存在一个

标记，它可能会取代您的

部分.mainSection

。您是说我应该在这里粘贴整个bootstrap 4 css吗？：）没有，但您提供的代码不足以正确掌握视觉输出。我们需要能够复制它来理解它并帮助您。如果您的导航处于正常流程（不是绝对的/固定的或诸如此类的），那么使用flexbox应该可以很容易地实现。将body用作flex容器，将其最小高度设置为100vh，并通过其flex属性使该部分自动增长。谢谢。