如何将页脚保持在屏幕底部[重复]答案

【问题标题】：How to keep footer at bottom of screen [duplicate]如何将页脚保持在屏幕底部[重复]
【发布时间】：2013-09-15 09:41:27
【问题描述】：

设置网页的最佳做法是，如果该网页上显示的内容/文本非常少，则页脚显示在浏览器窗口的底部而不是网页的一半？

【问题讨论】：

position:fixed;bottom:0;left:0;right:0;height:30px;
你能展示一下到目前为止你尝试了什么吗？
一个好的做法是先搜索其他类似的讨论，例如stackoverflow.com/questions/643879/…
我试图设置该部分的最小高度 :(
热门答案不适用于 REACT -- 试试 this Flexbox solution，它适用于 React/Angular/html/everything，来自 Chris Coyier (CSS-Tricks)

标签： html css

【解决方案1】：

设置它的 position:fixed 和 bottom:0 以便它始终位于浏览器窗口的底部

【讨论】：

谁能证明为什么这被否决了？我想这是将元素保持在视口底部的最简单方法。
是的。它被否决了，因为如果页面上有更多内容，页脚仍然保留在页面底部，无论文档高度如何。这不是正确的行为。
Radu - 这就是整个讨论的原因。保持页脚可见，而不是在荷兰和井底深处。上面的查马拉也说了同样的话。你也对她投了反对票吗？

【解决方案2】：

使用这种风格

min-height:250px;
height:auto;

【讨论】：

【解决方案3】：

您可以使用position:fixed; 到bottom。

例如：

#footer{
 position:fixed;
 bottom:0;
 left:0;
}

【讨论】：

然后无论实际页面上有多少内容，它都会显示在屏幕底部。不好的建议。
@mwieczorek 嗯，我想这取决于你想要什么？我不会说查马拉的建议不好。这实际上是我想要的，它对我有用 :) 在屏幕调整大小时，我的页脚完全保持在我想要的位置：在我的页面底部。谢谢查马拉。
谢谢..它成功了。
查马拉干得好。那是我的果酱。
我同意，好建议。我想要并认为这就是 mwieczorek 所要求的。

【解决方案4】：

您正在寻找的是 CSS Sticky Footer。

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow: auto;
  padding-bottom: 180px;
  /* must be same height as the footer */
}

#footer {
  position: relative;
  margin-top: -180px;
  /* negative value of footer height */
  height: 180px;
  clear: both;
  background-color: red;
}


/* Opera Fix thanks to Maleika (Kohoutec) */

body:before {
  content: "";
  height: 100%;
  float: left;
  width: 0;
  margin-top: -32767px;
  /* thank you Erik J - negate effect of float*/
}

<div id="wrap">
  <div id="main"></div>
</div>

<div id="footer"></div>

【讨论】：

由于某种原因添加会破坏页脚。
我的页脚没有固定高度...它可能在不同的设备上有所不同，或者在纵向和横向格式之间有所不同。怎么办？
@miliu，你的页脚高度是如何计算的？如果您使用的是相对值（如 em 或 vh/vw），您可能可以在此处输入相同的值。如果比这更复杂，CSS 的calc() 函数可能会派上用场。作为最后的手段，考虑使用 JavaScript 使用获得的维度动态设置属性，例如使用 Element.getBoundingClientRect 或 jQuery。
CSS Sticker Footer 链接将我发送到一堆垃圾邮件。
@Raymond26 谢谢。删除了那个链接。

【解决方案5】：

HTML

<div id="footer"></div>

CSS

#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:100px;   
   background:blue;//optional
}

【讨论】：

绝对定位是确保您的标记在某些设备上中断的最佳方式。

【解决方案6】：

也许最简单的方法是使用position: absolute 固定到底部，然后使用合适的边距/填充来确保其他文本不会溢出到它的顶部。

css：

<style>
  body {
    margin: 0 0 20px;
  }
  .footer {
    position: absolute;
    bottom: 0;
    height: 20px;
    background: #f0f0f0;
    width: 100%;
  }
</style>

这里是html的主要内容。

<div class="footer"> Here is the footer. </div>

【讨论】：

如果内容没有占满整个页面，此方法有效。一旦您添加更多内容，它就会中断。
投反对票：正如 RSSM 所说，如果页面高于屏幕，它就会中断。真的，不推荐这个。
Tbh 我不确定我在编写这段代码时在想什么。这在当时似乎是合理的......`:)