Question

我被一个页脚困住了。

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

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

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

谢谢！

Answer 1

在给定的代码段中，定位已关闭。您的页面上每个元素的位置都需要完成一些工作。具有位置设置的唯一节点是左菜单并且它是固定的。

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

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

删除左，右和右。只需添加相对和清晰的位置：两者。

Answer 2

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

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