twitter-bootstrap – Bootstrap 3 – 浮动页脚

发布时间：2020-12-18 00:22:47 所属栏目：安全来源：网络整理

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

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

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

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

提前致谢.

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

但是,如果你确实想使用自定义CSS,那么就是这样的.假设您的页脚元素具有ID“页脚”：

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

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

body {
  margin-bottom: 100px;
}

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!