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

Posted 2023-03-21

【中文标题】由于高度，页脚位置错误：100%

【英文标题】：footer position wrong because of height:100%

【发布时间】：2020-02-16 10:07:54

【问题描述】：

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

【问题讨论】：

一二三类有float样式吗？

回答 MR.Mostafa，不涉及浮点数，我也不打算使用任何浮点数。这是简化代码的链接。 jsfiddle.net/80cL2heu

【参考方案1】：

Try this 

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

谢谢

【讨论】：

不起作用，代码似乎没有任何效果。另外，我不是反对你的人。

能分享一下网址吗？

这是一个简化代码的链接。 jsfiddle.net/80cL2heu

【参考方案2】：

.content 
   display: inline;

【讨论】：

您的意思是将该代码放在“页脚”中吗？如果我希望页脚始终粘在屏幕底部，它会起作用，但我不希望这样。我希望仅当用户滚动到页面的最底部时才显示页脚部分。这是简化代码的链接。 jsfiddle.net/80cL2heu

尝试添加'display: inline;'到“内容”类

添加 'display: inline;'作品。感谢您的帮助。