页脚在底部

Question

我被页脚困住了。

我有这个代码 - https://jsfiddle.net/annaolsh/pLzv5sg5/13/

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

在小屏幕上，导航栏显示在顶部，页脚显示在底部 - 没错。

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

谢谢！

Answer 1

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

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

https://jsfiddle.net/rppmvgeo/

Answer 2

在给定的代码片段中，定位已关闭。页面上每个元素的位置还有一些工作要做。唯一设置了位置的节点是左侧菜单，它是固定的。

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

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

删除左、下和右。只需添加相对位置和 clear:both.

演示： https://jsfiddle.net/pLzv5sg5/14/