底部的页脚答案

【问题标题】：Footer on the bottom底部的页脚
【发布时间】：2018-03-12 08:55:01
【问题描述】：

我被页脚困住了。

#footer {
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: orange;
  text-align: center;
}

在小屏幕上，导航栏显示在顶部，页脚显示在底部 - 这是正确的。

但在大屏幕上，当导航栏垂直显示在左侧时，页脚会消失。无法弄清楚如何显示页脚。它不需要是粘性的：用户需要向下滚动并查看它（与小屏幕上相同）。页脚的宽度应为屏幕尺寸的 100%。

谢谢！

【问题讨论】：

【解决方案1】：

在给定的代码中，sn-p 定位是关闭的。页面上每个元素的位置需要做一些工作。唯一设置位置的节点是左侧菜单，它是固定的。

最简单的解决方法是使用以下 css：

#footer {
   position: relative;
   clear:both;
   padding: 1rem;
   background-color: orange;
   text-align: center;
}

删除左、下和右。只需添加 position relative 和 clear:both。

【讨论】：

您说要处理每个元素的位置。但是您只使用一个元素就解决了问题。这是一个糟糕的解决方案吗？
随着解决方案的增长，您可能会遇到一些问题。目前还好！ :) 对于未来，我建议不要将位置设置为默认值，因为有时，当子节点从父节点继承位置时，事情会变得非常糟糕：D

【解决方案2】：

在内容包装器中添加页脚代码，即 container-fluid 使用以下 CSS 代码作为页脚：

#footer {
 padding: 1rem;
 background-color: orange;
 text-align: center;
}

【讨论】：