时间戳

首页 > 解决方案 > 由于高度，页脚位置错误：100%

html - 由于高度，页脚位置错误：100%

问题描述

我发现很多人都在问类似的问题，但我的问题似乎不同。这是我的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%;   包含 <html> 和 <body>

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

我没有任何问题，只要我的所有内容都在“内容”类中。但是，现在我想在“内容”类下面添加 <footer> 。所以 <footer> 位置应该在 content-3 之下，但它却出现在 content-1 之下。有没有办法添加 <footer> 但不在“内容”类中？

我试过的：

可视化图像

标签： htmlcssheightfooterpositioning

解决方案

.content {
   display: inline;
}

推荐阅读