无论其他元素的大小如何，将页脚 div 设置为始终位于容器 div 的底部[重复]答案

【问题标题】：Setting a footer div to always be at the bottom of the container div regardless of the size of the other elements [duplicate]无论其他元素的大小如何，将页脚 div 设置为始终位于容器 div 的底部[重复]
【发布时间】：2022-01-06 00:46:19
【问题描述】：

我有一个包含子元素的容器 div。

    <div class='wrapper'>
       <div class='content'></div>
       <div class='footer'></div>
    </div>

content div 可以具有动态高度，但 footer div 需要始终固定在底部。

当我尝试设置包装器时

    position: relative

以及带有以下内容的页脚子项：

    display: absolute;
    bottom: 0;

仅当我设置包装器的高度时它才有效。此外，在调整窗口大小时，页脚会消失。

有没有办法在不使用位置的情况下使用 flexbox 实现这种行为？即固定页脚和动态内容？

【问题讨论】：

标签： html css footer

【解决方案1】：

我建议使用footer 元素。然后，您可以将您的页脚定位为absolute 或fixed，无论您喜欢什么，并设置bottom: 0; 使其位于最底部。在这个例子中，我使用了position: fixed;，所以它总是在视口中。我在您的wrapper 上添加了200vh，只是为了演示footer 在滚动时始终位于视口底部。

footer {
  position: fixed;
  bottom: 0;
  background-color: grey;
  width: 100vw;
  text-align: center;
  color: yellow;
}

body {
  margin: 0;
}

.wrapper {
  background-color: lightgreen;
  height: 200vh;
}

<div class='wrapper'>
   <div class='content'></div>
</div>
<footer>FOOTER</footer>

【讨论】：

【解决方案2】：

使用position :fixed;：

.content {
  font-size: 4rem;
}

.footer {
  position: fixed;
  bottom: 0;
  background: red;
  text-align: center;
  width: 100%;
  font-size: 2rem;
}

<div class='wrapper'>
  <div class='content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class='footer'>footer</div>
</div>

【讨论】：

【解决方案3】：

这是我在所有网站上的显示方式，它会将页脚粘贴到页面底部。我相信这是不使用position:fixed 为#footer 的最简单和最好的解决方案，这样内容本身会将#footer 推到底部，如果没有内容它仍然会因为min-height:100vh 而在底部.请注意120px 是#footer 的大小，这就是为什么我们需要从100vh（主要内容）中减去它。

body {
  height: 100%;
  width: 100%;
  min-width: 320px;
  color:#FFF;
  font-size:18px;  
}

#page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#header {
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  height: 40px;
  background-color: orange;
}

#content {
  flex: auto;
  min-height: calc(100vh - 120px);
  background-color: yellow;
}

#footer {
  height: 120px;
  background-color: blue;
}

<body>
  <div id="page">
    <div id="header">this is header</div>
    <div id="content">this is content </div>
    <div id="footer">this is footer</div>
  </div>
</body>

您可以根据自己的喜好将#header 中的position:relative 更改为position:fixed。

【讨论】：

这在当时是一个很好的策略，但是 flexbox 让它过时了。不再需要手动计算。附言sn-p 编辑器中的整洁按钮是您的朋友。 :)
不知道，我理解你的评论或者是错误的。我相信这是最现代和最好的解决方案。我想说“位置：固定”是旧的，从一开始就在整个网络上使用。您可以删除min-height，但此人将看不到它是如何推送内容的，因为我的 HTML 示例中没有任何内容。是的，我的示例依赖于 flexbox。
另外我认为你错误地结束了这个问题，因为你建议的“重复”谈论不同的事情，比如overflow-y:auto等等。
如果你正确地实现了 flexbox，你就不需要计算高度。提供全高填充。这就是我的观点。你也不需要明确定位任何东西。如果有更好的副本，请随时提出。这不是一个新主题。