Question

所以，当我尝试创建一个100％宽的页脚，重叠内容宽度（具有自己的宽度）时，我的问题就出现了。

查看this image，看看我的意思。

这里的里程碑是将内容的底部附加到绿色页脚，无论视口是什么，它都会粘在那个元素上，不会越过它或者掉下来。

它是一个绝对定位的元素，为此我还希望得到一些更好的解决方案，如果可能的话。该网站使用Bootstrap 3制作，它将完全响应。快速回复，您将得到我的谢意！

请记住，我无法真正对此进行搜索。这是我们公司的CMS，我不得不对此进行过多的审查，以确保其价值。

Answer 1

总结一下你的情况（据我所知）你有一个基于引导程序的页面，其中每个选项卡都使用“容器”类，这可以根据你的查看屏幕大小减少选项卡宽度。你想要的是一个页脚，它将位于活动标签下，粘贴到内容的底部，使用屏幕的整个宽度（意味着它不受“容器”类的约束）。如果这是您想要的，请尝试以下方法：

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        ...
    </nav>
    <div class="tab-content">
        ...
    </div>
    <footer>
        ...
    </footer>
</body>

注意：如果页脚是绝对定位的，这将不起作用。

如果这不是您想要的，请提供更多信息。

Answer 2

感谢paulalexandru这个有效的解决方案：

#footer {
   position: fixed;
   width: 100%;
   left: 0;
}

这对我来说，在审查并重新定位我的布局的HTML结构之后，我终于得到了我想要它的地方。将左设置为零是必要的，否则它会在左侧留下一个空白区域，因为页脚位于另一个元素内部，该元素不是网站本身的全宽。

内容＆amp;保持页脚间距与响应性

2 个答案: