ブートストラップスティッキーフッターが、私はページの下部にページコンテンツとスティックを下回ってフッターを作成しようとしている小さな幅のページ

に問題があります。私は私のページへTwitter Bootstrap 3 Sticky Footerを適用しようとしましたが、それは下に固執し、（ページが短すぎる）ページコンテンツに重なるようにフッターの原因となります。ページが非常に狭い場合（簡体字）ブートストラップスティッキーフッターが、私はページの下部にページコンテンツとスティックを下回ってフッターを作成しようとしている小さな幅のページ

<body> 
    <!-- Navigation --> 
    <div class="wrapper"> 
    <div class="container" 
    page content 
    </div> 
    </div> 
<footer class="footer navbar-fixed-bottom"> 
    <!-- Footer--> 
</footer> 
</body>

とフッターは今底に付着している、しかし：

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    margin-bottom: 348px; 
} 
.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 348px; 
}

とhtml：

私は現在、CSSを使用していますそれをカバーするフッターの背景ではなく、背景まで見ることができます。

Image

これを解決するための任意の助けいただければ幸いです。

出典

2017-04-13 huhn

を役に立てば幸い？ああ、それはまた、ページが非常に短くない場合、適切に動作しません。 –

あなたのページはきれいに見えますか？指定したリンクの固定フッターはどこですか？私は348pxの背の高いフッタを「粘着性のある」ものにすることを推奨しません！ –

@JonesVinothJoseph下部の黒いフッター。 https://i.stack.imgur.com/LrWe5.pngページが狭い場合、これが起こります。 – huhn

jQueryを使用していることがわかります。 footerからの高さを取り除くとともに、シンプルなresize()イベントが正しいmargin-bottomを決めることができます。

$(window).resize(function(){ 
    var xHeight = $('.footer').height(); 
    $('body').css('margin-bottom',xHeight + 'px'); 
})

は、あなたが「短い」のページへのリンクを持っていますか、これは

出典

2017-04-13 06:30:44

これでジョブが完了します。 jQueryが必要であることに失望している。 – huhn

それ以外の場合は@snehaが推奨するようにメディアクエリを使用してください！しかし、どの画面サイズでどのくらいマージンボトムが必要なのか、 –

問題は、高さがあります。ちょうどfooterから高さを削除しても問題ありません。

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    margin-bottom: 348px; 
} 
.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
} 

<!----html----> 
<body> 
    <!-- Navigation --> 
    <div class="wrapper"> 
     <div class="container">page content</div> 
    </div> 
    <footer class="footer navbar-fixed-bottom"></footer> 
</body>

出典

2017-04-13 06:20:59 sneha

これは完璧です@huhn –

ありがとうございます。しかし、ページが狭くなると、フッターはページの内容と重なり始め、隠します。 http://i.imgur.com/St43mlr.png – huhn

は、ラッパークラスの値をchnageすべての画面のメディアクエリを記述します。例.wrapper { margin-top：16px; 下敷き：500px; } – sneha

ブートストラップスティッキーフッターが、私はページの下部にページコンテンツとスティックを下回ってフッターを作成しようとしている小さな幅のページ

答えて

関連する問題