如何将页脚放在没有内容的页面底部

Question

我有一个简单的目标网页，其中包含全屏背景图片，没有其他内容。但是，当我加载它时，页脚会一直到达Navbar并停止图像全屏（图像在包含内容的页面上是全屏的）。这就是它的外观：https://i.stack.imgur.com/CtK4K.png

我的背景图片的CSS如下：

.index {
  background: url('/Content/images/home2.jpg') no-repeat center center;
  background-size: cover;
  min-height: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
}

此外，我的导航栏妨碍了这张图片，我还需要纠正。

Answer 1

将此添加到您的风格中：

{{1}}

Answer 2

你可以把： 页脚{位置：绝对的;底部：0;}

CodePen

Answer 3

或者你可以在div中包装除footer之外的所有内容，然后给它一个

min-height: calc(100vh - 70px);

将70px更改为页脚的实际高度。