页脚位置由于高度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%;，包括＆

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

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

。因此，

位置应该位于content-3之下，但它会出现在content-1之下。是否可以添加

而不在类“ content”中？

我尝试过的事情：

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

image for visualisation

Answer 1

让我知道您是否尝试过position:fixed; bottom:0;。谢谢。

Answer 2

Try this 

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