Bootstrap 3 - 浮动页脚

Question

我想在我的网站上设计一个设计，页脚总是出现在屏幕上，并浮动。当用户向下滚动时，页脚随之移动。我没有把自己的想法卖给自己 - 但这就是我认为我想要链接到公司的东西的地方。如果这是一个坏主意，请让我知道这些限制（在移动设备上可能？）。

我看过页面底部有页脚的设计和示例，但如果“低于”，则用户需要向下滚动才能看到它。不好。

有人可以向我提供有关如何实现这一目标的基础知识吗？

提前致谢。

Answer 1

Bootstrap有一个可以满足您需求的类：.navbar-fixed-bottom。使用该类是更好的解决方案，因为您不需要自定义css。

但是，如果您确实想使用自定义CSS，请按照以下方式进行操作。假设您的页脚元素具有ID＆＃39;页脚＆＃39;：

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

并且您必须确保当用户滚动到页面底部时，页脚不得贪图最低内容。为了避免这种情况，最简单的解决方案是将底部边距添加到与底脚高度相同的量的body元素。假设您的页脚元素高100像素，您可以使用以下代码：

body {
  margin-bottom: 100px;
}

但是为了确保避免页脚重叠，您必须使用jQuery更新屏幕尺寸更改时主体的底部边距，因为页脚高度可能会发生变化，尤其是在响应式布局中。