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粘性页脚有小宽度的问题页面

回答

相关问题