Bootstrap div 拉伸到页面底部

Question

我有默认的 bootstrap 模板设置，我的问题是 div 和页脚之间有白色 space。白色 space 是因为没有足够的内容填满整个页面，所以正文显示在页脚和内容 div 之间。有没有办法将 bootstrap div 拉伸到页面底部，同时让页脚保持在最底部？可能用弹性盒子？

这是我正在使用的代码：（试图将 "wrapper" div 延伸到页脚）

HTML

<body ng-app="firstApp">
    <div ng-view="" class="everything">

        <div class="wrapper">
            <div class="mid">
                <div class="row">
                    <div class="col-sm-12">
                        <p>This is in a div that should fill the screen</p>
                    </div>
                </div>
            </div>
           <div class="push"></div>
        </div>

       <footer class="footer">
           <div class="container">
               <p>Hello I'm the footer</p>
           </div>
       </footer>
</div> <!--closes the "everything" class -->

CSS

    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%;
}

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

Answer 1

特洛伊，就在这里，你可以这样做。

将 html 和 body 都设置为 height:100vh; 并将您的 div 设置为相同的 height:100vh;

你可以在有同样问题的中看到这个。

Answer 2

对我有用的是在填充元素中同时设置 height: 100%; 和 min-height: 100vh;。

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

并将此元素添加到父容器的类。

Bootstrap div 拉伸到页面底部

Bootstrap div stretch to bottom of page

html

css

footer

twitter-bootstrap