Bootstrap footer覆盖内容

我一直在试图解决这个问题几天。我看到很多问题，但没有一个解决方案似乎对我有用。Bootstrap footer覆盖内容

我有一个网站，有一个Bootstrap 3前端。我想要一个粘性底部页脚，并且我使用Bootstrap的navbar navbar-fixed-bottom样式来实现此目的。它正在工作，但问题是，当没有足够的空间时，内容将与页脚重叠。我希望能够滚动页脚和页眉的内容，并且我不希望页脚随内容一起滚动。

Here is the site。您可以调整浏览器的高度来查看我在说什么。

任何帮助，将不胜感激！

来源

2015-06-11 Icemanind

你是否需要像这样的smth http://plnkr.co/edit/M3HDYiPWl3P2t3St9xAd?p=preview？ – yuyokk

Icemanind，我在这里帮助你解决问题的是这个。
我给身体增加了身高。
我设置了不使用body标签的背景图片并对其进行了修复。
这样它现在滚动并且菜单和页脚保持固定。
我也做了背景图片不重复。

这是你想要的。

这里是Fiddle。

您的自定义CSS的CSS链接不想在小提琴中弹球，但在模拟工作正常。

<style> 
body{ 
    height:2000px; 
} 
.bg-image { 
    position: fixed; 
    width: 100%; 
    height:100vh; 
    background: url('http://upload.wikimedia.org/wikipedia/commons/d/d3/Albert_Einstein_Head.jpg') no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    z-index: -100; 
}  
</style>

已更新。

对小提琴做了一个更改，我添加了一个透明区域来充当2000px高度的一些内容。
我在此内容的底部添加了一些边距。现在看看，看看这是你在这里后。
这是一个完整的尺寸Fiddle。

来源

2015-06-11 04:52:10 AngularJR

不，页脚和标题已经停留在原地。我的问题是内容覆盖了页脚。我更新了你的小提示向你展示了这个问题：https://jsfiddle.net/yewoyc71/2/ – Icemanind

当你看小提琴时，注意内容和页脚colide和页脚是如何在内容的顶部 – Icemanind

你说你想要修复页脚和页眉。我在这里错过了什么？请解释你想要什么。如果页脚是固定的，则内容将滚过页脚。 – AngularJR

Bootstrap footer覆盖内容

回答

相关问题