web-dev-qa-db-ja.com

Bootstrap divページの一番下までストレッチする

デフォルトのbootstrapテンプレートセットアップがあります。私の問題は、divとフッターの間に空白があることです。空白は、ページ全体を埋めるのに十分なコンテンツがないために発生します。したがって、本文はフッターとコンテンツdivの間に表示されます。bootstrap 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 -->

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

私はこのトピックに関する多くのスタックオーバーフローの投稿を読みましたが、これについてのベストプラクティスについてはまだ混乱しています。

htmlcsstwitter-bootstrapfooter
11
Troy Griffiths

トロイ、ここにあるので、あなたはそれを行うことができます。

htmlとbodyの両方をheight:100vh;に設定し、divも同じheight:100vh;に設定します

これは、同じ問題が発生したこの投稿で確認できます。

15
AngularJR

私のために働いたのは両方を設定することでした、height: 100%;およびmin-height: 100vh;をfill要素で使用します。

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

そして、この要素を親コンテナのクラスに追加します。

2
Thomas Weinmüllner