高分辨率时页脚不在底部答案

【问题标题】：Footer is not in the bottom on high resolution高分辨率时页脚不在底部
【发布时间】：2020-06-10 14:46:55
【问题描述】：

我有一个带有以下 HTML 和 CSS 代码的页脚，当我以我的分辨率 (1366x768) 查看页面时，一切看起来都很好。但是当使用更高分辨率的设备 (1920x1080) 时，页脚不会固定在底部，而是在底部上方（靠近页面中间）。我使用了 Chrome Zoom，看起来页脚与页面中的所有元素一起移动。

.footer {
  font-size: calc(16px - 2px);
  line-height: 1.1;
  color: #999;
  margin-bottom: 5px;
  text-align: center;
	background-color: #fff;
	padding: calc(8px * 1.5) 0;
}

</div> <!--/.container-->
<footer class="footer container">
  <div class="container-inner">
    <p> <a href="http://example.org" target="_blank">Name, Inc.</a> Copyright ©2020 </p>
  </div>
</footer>

有没有办法让页脚出现在底部（在所有分辨率上）并且不与其他元素一起移动？感觉很松散。

【问题讨论】：

是不是因为你的页面没有足够的内容来下推？您可以使用position: fixed，但这会使其停留在视口底部并在您滚动时重叠内容。发布更多的 HTML 结构。
上面元素的CSS是什么？很可能您的上方有浮动元素，或者元素显示为内联块。
这能回答你的问题吗？ How to align footer (div) to the bottom of the page?

标签： html css footer

【解决方案1】：

只需给页脚之前的内容元素一个计算的最小高度（考虑所有元素的固定高度）。如果您发布完整的 html 代码，它会更容易帮助您...

[编辑] 示例代码 -> 假设有一个高度为 80 像素的标题（不包含在 div.content 中）和一个高度为 100 像素的页脚，您可以为容器提供等于视口高度 (vh) 减去 180 像素（80 像素）的最小高度页眉的 + 100 像素的页脚）：

.header
{
  height:80px;
}

.footer
{
  height:100px;
}

.container
{
  min-height:calc(100vh - 180px); 
}

对于看起来像这样的 html 页面代码：

<div class="header"></div>
<div class="container"></div>
<div class="footer"></div>

如果你想保持没有固定高度的页眉和页脚，而不仅仅是使用 flex-box（这需要一个包装元素，它也可以是）：

.flex-wrapper
{
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header
{
  // whatever
}

.footer
{
  // whatever
}

.container
{
  flex:1; 
}

这将适用于这个 html 结构：

<div class="flex-wrapper">
  <div class="header"></div>
  <div class="container"></div>
  <div class="footer"></div>
</div>

【讨论】：

这是一个更好的评论，并且很可能会被否决 - 因为它没有提供代码解决方案，而且我们不知道 HTML 的其余部分是什么样的。
是的@disinfor你是对的，但我没有足够的声誉发表评论...... ^_^
然后至少使用 OP 提供的小 HTML/CSS 将代码发布到您的答案中。

【解决方案2】：

试试这个：

html, body {margin:0; padding:0}

.footer {
  font-size: calc(16px - 2px);
  line-height: 1.1;
  color: #999;
  margin-bottom: 5px;
  text-align: center;
  background-color: #ccc;
  padding: 0;
  bottom: 0;
  position: absolute;
  width: 100%;
}

<footer class="footer container">
  <div class="container-inner">
    <p> <a href="http://example.org" target="_blank">Name, Inc.</a> Copyright ©2020 </p>
  </div>
</footer>

参考：https://www.w3schools.com/cssref/pr_pos_bottom.asp

【讨论】：

虽然这可能会回答问题，但请解释您添加的原因和代码，而不是非现场链接。

【解决方案3】：

使用 flexbox，我们可以通过将内容、页脚和可选的页眉包装在带有 flex-direction: column; 和 min-height: 100vh 的 flex 容器中，同时将内容设置为 flex-grow: 1，轻松地将页脚保持在底部。 flex-grow 的默认值是 0，所以我们没有对页脚做任何事情（尽管我确实使用 align-self: center 将其居中）。

我还添加了一个切换来显示增加的内容视图，以证明当内容本身未填充 #content 时，页脚将与内容一起流动，同时保持在底部。

#container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  align-self: center;
}

#content {
  flex-grow: 1;
  padding: 1rem;
  border-bottom: 1px solid grey;
}

.to-bottom {
  margin-top: 110vh;
}

<div id="container">
  <div id="content">
    <label for="toggle-height">Force Scroll: </label><input id="toggle-height" type="checkbox" onclick="document.querySelector('p:nth-of-type(2)').classList.toggle('to-bottom')"/>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius, corporis! Sunt ducimus impedit, dolor id ipsa aliquid in necessitatibus labore! Iste laboriosam eos eligendi vel repellendus, blanditiis accusamus vitae ipsam!</p>
    
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius, corporis! Sunt ducimus impedit, dolor id ipsa aliquid in necessitatibus labore! Iste laboriosam eos eligendi vel repellendus, blanditiis accusamus vitae ipsam!</p>
  </div>
  <footer>&copy; My Site</footer>
</div>

【讨论】：