即使内容不够大，也将页脚强制放在屏幕底部（不粘）

Posted 2023-03-21

【中文标题】即使内容不够大，也将页脚强制放在屏幕底部（不粘）

【英文标题】：Force my footer on the bottom of the screen even if content is not big enough (without being sticky)

【发布时间】：2014-11-21 17:35:28

【问题描述】：

我有一个非常简单的问题：当我的内容不够高而无法填满屏幕时，页脚就会出现，看起来有点乱。您可以在普通笔记本电脑显示器上看到它：http://www.dlgt.co

在该页面上，强制页脚保持低位的技巧是什么？我不希望它很粘。我试图在内容容器（#loading_effect）上设置一个 min-height: 100% ，但没有成功。看起来 px 中的特定最小高度有效，但这不适用于所有显示器。

谢谢！

【参考方案1】：

尝试将height: 100% 添加到html、body 和您的主要内容中。这会将页脚移动到屏幕之外。通过将等于页脚高度的负数margin-bottom 添加到主要内容，您可以再次向上移动页脚。示例见http://codepen.io/ckuijjer/pen/wbony

编辑：好的，这并没有完全奏效。使用min-height: 100%、box-sizing: border-box 和等于页脚高度的padding-bottom 重试。见http://codepen.io/ckuijjer/pen/jFgwd

【讨论】：

在尝试了一下之后，如果内容大于页面，看起来这会导致问题，页脚在它上面。 codepen.io/anon/pen/GetiI

【参考方案2】：

或者尝试在正文中使用页脚背景。在你使用它之前，你应该重新组织你的结构，所有部分必须有 100% 的宽度和其他背景。

解决方案就在那里：http://codepen.io/anon/pen/kBLar

---

或者那里 - html：

<header>
  <div class="container">
    <h1>Title</h1>
  </div>
</header>
<article>
  <div class="container">
    Content
  </div>
</article>
<footer>
  <div class="container">
    &copy; Copyright 2014
  </div>
</footer>

和css：

body
  margin:0;
  background:#222;
  color:#222;


header
  background:#ccc;


article
  background:#fff


footer
  color:#ccc;


.container
  max-width:960px;
  margin:0 auto;
  padding:20px;

【讨论】：

这是一个解决方案，但是我的部分内容并没有涵盖所有内容，这使得它有点混乱。谢谢！

【参考方案3】：

我想要的是将页脚放在浏览器视图的底部，前提是内容的长度不足以填满浏览器窗口（非粘性）。

我可以通过使用 CSS 函数 calc() 来实现。现在主要支持。你可以这样使用：

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

CSS：

.container

    min-height: 70%;
    min-height: -webkit-calc(100% - 186px);
    min-height: -moz-calc(100% - 186px);
    min-height: calc(100% - 186px);

将 186 更改为页脚的大小。