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

Posted 2023-03-21

【中文标题】如何将页脚保持在屏幕底部[重复]

【英文标题】：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;

你能展示一下到目前为止你尝试了什么吗？

一个好的做法是先搜索其他类似的讨论，例如***.com/questions/643879/…

我试图设置该部分的最小高度 :(

热门答案不适用于 REACT -- 试试 this Flexbox solution，它适用于 React/Angular/html/everything，来自 Chris Coyier (CSS-Tricks)

【参考方案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 我不确定我在编写这段代码时在想什么。这在当时似乎是合理的......`:)