9

我想在我的网站上设计一个页脚始终出现在屏幕上并浮动的设计。当用户向下滚动时，页脚会随之移动。我没有在这个想法上推销自己——但我想我想从那里链接到公司的东西。如果这是一个坏主意，请让我知道限制（也许在移动设备上？）。

我已经看到在页面底部有页脚的设计和示例，但如果这是“首屏下方”，则用户需要向下滚动才能看到它。不好。

有人可以向我提供有关如何完成此操作的基础知识吗？

提前致谢。

4

1 回答 1

15

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

但是，如果您确实想使用自定义 CSS，请参考以下方法。假设您的页脚元素具有 ID 'footer'：

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

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

body {
  margin-bottom: 100px;
}

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

于 2013-09-27T22:19:21.923 回答