页脚位置错误，因为 height:100%

Question

我发现很多人问类似的问题，但我的似乎是另一个问题。 这是我div.

的安排

<div class="container-fluid px-0">
  <header>
  </header>

  <div class="content">
    <div class="content-1">
    </div>
    <div class="content-2">
    </div>
    <div class="content-3">
    </div>
  </div>
</div>

除页眉和页脚外，每个 class 都有 height:100%;，包括 和

Class content-1、content-2、content-3 有 background-size:cover; 因为我希望背景是整页。

我没有任何问题，只要我的所有内容都在 class "content" 中。但是，现在我想在 class "content" 下方添加

。所以

位置应该在 content-3 下面，但它出现在 content-1 下面。有没有办法添加

但不在 class "content" 内？

我试过的：

• 将
  设置为 position:absolute; bottom:0; 无效。问题仍然存在。
• 将 overflow:auto 设置为 class "content" 会将页脚设置为 正确的位置，但现在我有两个滚动条。

image for visualisation

Answer 1

Try this 

.content {
    float: left;
    display: block;
    width: 100%;
}

谢谢

Answer 2

.content {
   display: inline;
}