Bootstrap 3 - 浮动页脚

Question

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

我已经看到设计和示例在页面底部有页脚,但如果这是"低于折叠",用户需要向下滚动才能看到它.不好.

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

提前致谢.

Answer 1

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

但是,如果您确实想使用自定义CSS,请按照以下步骤操作.假设你的页脚元素有ID'页脚':

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

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

body {
  margin-bottom: 100px;
}

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