由于高度，页脚位置错误：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>

除了页眉和页脚之外的每个类都有 height:100%;   包括 和

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

我没有任何问题，只要我所有的内容都在“内容”类中。但是，现在我想在“内容”类下面添加

。所以

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

但不在“内容”类中？

我尝试过的：

• 将
  设置为  position:absolute; bottom:0;  不起作用。问题仍然存在。
• 将overflow:auto 设置为“内容”类会将页脚设置为 正确的位置，但现在我有两个滚动条。

image for visualisation

Answer 1

Try this 

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

谢谢

Answer 2

.content {
   display: inline;
}