Css：フッターが底にならない？

コンテンツがページ全体よりも長い場合、フッターは下部に移動し、フッターを表示するには下にスクロールする必要がありますが、内容が低く、スクロールしない場合、下部とフッターの間にスペースがありますか？Css：フッターが底にならない？

私はブルマのCSSフレームワークを使用している、ここにコード

にある

.footer { 
 
    padding: 1rem 1.5rem 1rem; 
 
    bottom: 0 !important; 
 
    width: 100%; 
 
    padding-bottom: 18px; 
 
    background-color: whitesmoke; 
 
    padding: 3rem 1.5rem 6rem; 
 
}

<footer class="footer"> 
 
    <div class="container"> 
 
    <div class="content"> 
 
     <p><i class="fa fa-hashtag"></i> &nbsp;&copy; 2017 - Project Name</p> 
 
     <p class="copyright">Built on the EC9 Platform with <a href="https://laravel.com/" target="_new">Laravel</a>, <a href="https://bulma.io/" target="_new">Bulma</a> and <span class="icon is-small"><i class="fa fa-heart"></i></span>.</p> 
 
    </div> 
 
    </div> 
 
</footer>

プレビュー：

出典

2017-10-01 Michael Jackson

https://github.com/jgthms/bulma/issues/47を見て –

あなたはスティッキーフッターを検討する必要があります。取り組むべきいくつかのオプションがここにあります：https://css-tricks.com/couple-takes-sticky-footer/ – DollarChills

あなたはあなたのコンテンツがどのように構造化されているかについてより多くの情報を提供する必要があります。 @DollarChillsのようないくつかのオプションが挙げられます –

あなたはpoistionを使用することができます。絶対。下：0;と、その高さ（フッター）にmargin-topを追加します。

出典

2017-10-02 05:19:44

あなたのCSSコードはパディング用に複製されています。

.footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    padding: 1rem; 
 
    width: 100%; 
 
    background-color: red; 
 
}

Hello 
 
<footer class="footer"> 
 
    <div class="container"> 
 
    <div class="content"> 
 
     <p><i class="fa fa-hashtag"></i> &nbsp;&copy; 2017 - Project Name</p> 
 
     <p class="copyright">Built on the EC9 Platform with <a href="https://laravel.com/" target="_new">Laravel</a>, <a href="https://bulma.io/" target="_new">Bulma</a> and <span class="icon is-small"><i class="fa fa-heart"></i></span>.</p> 
 
    </div> 
 
    </div> 
 
</footer>

出典

2017-10-02 05:28:25

Css：フッターが底にならない？

答えて

関連する問題