页面底部高度可变的页脚[重复]

Posted 2023-03-21

【中文标题】页面底部高度可变的页脚[重复]

【英文标题】：Footer with variable height at bottom of page [duplicate]

【发布时间】：2016-12-18 21:14:12

【问题描述】：

我正在使用这种方法将页脚保持在底部：https://codepen.io/cbracco/pen/zekgx

body 
  position: relative;
  padding-bottom: 6rem;
  min-height: 100%;



.footer 
  position: absolute;
  bottom: 0;

问题是我们有几个不同的页脚版本，具体取决于页面，它们有不同的高度。

因此，在某些页面上，主要内容底部和页脚之间的死区过多。

我们可能会根据页面更改正文的底部填充，但考虑到我们网站的结构，这并不容易实现，而且看起来也不是一个非常优雅的解决方案。

【问题讨论】：

为什么不用javascript？

您的意思是说在页面加载时检查页脚的高度并调整正文的底部填充？我们希望避免使用 JS 进行样式设置，但我认为这是一种可能性。

没错。这很好用。

【参考方案1】：

有几种 CSS 方法可以将页脚固定到容器底部。

一种现代技术使用 flexbox。使用 flex 属性，您可以：

改进布局和对齐选项 摆脱绝对定位 不用担心页脚与任何内容重叠

html 
  height: 100%;
  box-sizing: border-box;


*,
*:before,
*:after 
  box-sizing: inherit;


body 
  display: flex;                  /* establish flex container */
  flex-direction: column;         /* align child elements ("flex items") vertically */
  justify-content: space-between; /* pin both flex items to opposite ends */
  margin: 0;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;


.demo 
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;


.demo h1 
  margin-top: 0;


.footer     
  padding: 1rem;
  background-color: #efefef;
  text-align: center;

<div class="demo">
  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

注意：使用justify-content: space-between，可以将两个元素（如问题中的）固定到弹性容器的相对边缘。如果有两个以上的元素，则应使用 auto 边距 (more details)。

Revised Codepen

---

浏览器支持

所有主流浏览器都支持 Flexbox，except IE 8 & 9。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要vendor prefixes。要快速添加前缀，请使用Autoprefixer。更多细节在this answer。

【讨论】：

这看起来不错，但不幸的是我们确实需要早期 IE 的支持。我应该提到这一点

@BenDavidow，这是一个可能对你有用的 polyfill：github.com/jonathantneal/flexibility