如何在纯CSS中定义可变高度粘性页脚？ [英] How can a variable-height sticky footer be defined in pure CSS?

问题描述

这里要注意的关键是页脚的高度不会被固定，但会随着内容的不同而不同。

The key to note here is the height of the footer is not going to be fixed, but will vary with its content.

当我说sticky footer 我使用它在我所理解的是一个页脚，从不高于视口的底部，但如果有足够的内容，它将被隐藏，直到用户向下滚动足够远，看到它的常见定义。

When I say "sticky footer," I use it in what I understand to be the common definition of "a footer that is never higher than the bottom of the viewport, but if there is enough content, it will be hidden until the user scrolls down far enough to see it."

注意，我不需要支持旧版浏览器。如果CSS display：table &

Note also I don’t need to support legacy browsers. If CSS display: table & related properties help here, they are fair game.

推荐答案

此处的所有其他解决方案都已过时，并且使用JavaScript或 table hacks。

All other solutions here are out of date and either use JavaScript, or table hacks.

随着 CSS flex模型，解决可变高度粘性页脚问题变得非常，非常容易：虽然大多数知道为水平方向布局内容，Flexbox实际上工作也很好的垂直布局问题。所有你需要做的是将垂直部分包装在Flex容器中，并选择要扩展的部分。它们会自动占用其容器中的所有可用空间。

With the advent of the CSS flex model, solving the variable-height sticky footer problem becomes very, very easy: while mostly known for laying out content in the horizontal direction, Flexbox actually works just as well for vertical layout problems. All you have to do is wrap the vertical sections in a flex container and choose which ones you want to expand. They'll automatically take up all the available space in their container.

注意标记和CSS有多么简单。

Note how simple the markup and the CSS are. No table hacks or anything.

灵活模式是所有主流浏览器支持以及据称是IE11 +，虽然我的IE没有正确呈现这个片段。

The flex model is supported by all major browsers as well as allegedly IE11+, though my IE doesn't render this snippet correctly yet.

html, body {
  height: 100%;
  margin: 0; padding: 0;  /* to avoid scrollbars */
}

#wrapper {
  display: flex;  /* use the flex model */
  min-height: 100%;
  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}

#header {
  background: yellow;
  height: 100px;  /* can be variable as well */
}

#body {
  flex: 1;
  border: 1px solid orange;
}

#footer{
  background: lime;
}

<div id="wrapper">
  <div id="header">Title</div>
  <div id="body">Body</div>
  <div id="footer">
    Footer<br/>
    of<br/>
    variable<br/>
    height<br/>
  </div>
</div>

这篇关于如何在纯CSS中定义可变高度粘性页脚？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！