Html 引导div延伸到页面底部

我有默认的引导模板设置，我的问题是div和页脚之间有空白。空白是因为没有足够的内容填满整个页面，所以正文显示在页脚和内容div之间。有没有办法将引导div拉伸到页面底部，同时使页脚保持在最底部？可能是flex box

下面是我正在使用的代码：（尝试将“wrapper”div拉伸到页脚）

HTML

---

我已经读了很多关于这个主题的stackoverflow帖子，但是我仍然对这个主题的最佳实践感到困惑

特洛伊，这是你可以做的

将

html

和

body

设置为

height:100vh

并将您的

div

设置为相同的

高度：100vh

你可以在有相同问题的中看到这一点。
对我有效的是设置了两个，
高度：100%和<代码>最小高度：100vh

.fill {
    min-height: 100vh;
    height: 100%;
}

并将此元素添加到父容器的类中。
Hi，Troy要将civ封面置于页面底部，您需要将
html
和
body
设置为
高度：100vh
然后将div设置为相同的值。就在昨天，我们讨论了同一个问题。看看这个对你有没有帮助。谢谢，我来看看！将此作为答案发布，我会标记为CorrectKind效果不错，但是
身高：100%
阻止其超出屏幕高度，即使页面较长。
    html {
        height: 100%;
    }

 body {
    height: 100% !important;
    font-family: 'Roboto', sans-serif;
    color: black;
    background: green;
 }

.footer {
    text-align: center;
    padding: 30px 0;
    height: 4em;
    background-color: #7ccbc8;
    width: 100%;
}

.fill {
    min-height: 100vh;
    height: 100%;
}