Bootstrap div延伸到页面底部

Question

Bootstrap div延伸到页面底部

Tro*_*ths 10 html css footer twitter-bootstrap

我有默认的bootstrap模板设置,我的问题是div和页脚之间有空格.白色空间是由于没有足够的内容来填充整个页面而引起的,因此正文显示在页脚和内容div之间.有没有办法将引导div拉伸到页面底部,同时还使页脚保持在最底部？可能有柔性盒？

这是我正在使用的代码:(尝试将"包装器"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 -->

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Ang*_*rJR 14

特洛伊,这是你可以做到的.

同时设置html和body,height:100vh;以及设置div相同height:100vh;

您可以在此帖中看到具有相同问题的内容.

Answer 2

小智 6

对我有用的是设置两者height: 100%;以及min-height: 100vh;填充元素。

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	10 年，11 月前
查看次数：	19176 次
最近记录：	8 年，9 月前