由于高度导致页脚位置错误：100％

Question

我发现很多人都在问类似的问题，但是我的似乎是另外一个问题。 这是我的部门的安排。

<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之下。有没有一种方法可以添加

而不在类“ content”中？

我尝试过的事情：

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

image for visualisation

Answer 1

.content {
   display: inline;
}

Answer 2

Try this 

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

谢谢