Bootstrap粘性頁腳有小寬度的問題頁面

我正在嘗試創建一個頁腳，該頁腳停留在頁面內容下方並粘貼到頁面底部。我已嘗試將Twitter Bootstrap 3 Sticky Footer應用於我的網頁，但會導致頁腳停留在底部並重疊頁面內容（如果頁面太短）。Bootstrap粘性頁腳有小寬度的問題頁面

我目前使用的CSS：

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

和HTML（簡體）

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

和頁腳現在粘在底部，但頁面時很窄，你可以看到背景而不是覆蓋它的頁腳背景。

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建議的媒體查詢！但是你將不得不在哪個屏幕尺寸上需要多少'margin-bottom' –

問題與高度。只要從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：{margin：16px; padding-bottom：500px; } – sneha

Bootstrap粘性頁腳有小寬度的問題頁面

回答

相關問題