使用CSS的流体粘性页脚 [英] Fluid sticky footer using CSS

问题描述

我知道有数以百万计的示例与粘性页脚有关，但是，我正在寻找更具体的解决方案.

I know there are millions of examples out there relating to sticky footers, however, I'm looking for a more specific solution.

如果内容很短，我想将页脚推到页面底部-我不希望它在那儿放更长的页面(即固定位置).

I want to push the footer to the bottom of the page if the content is short - I don't want it to sit there for longer pages (i.e. fixed positioning).

我已经有一个可以做到这一点的javascript解决方案，但是我正在寻找一种潜在的仅CSS解决方案，以便可以抛弃javascript.

I already have a javascript solution that does this, however I'm looking for a potential CSS only solution so that I can ditch the javascript.

我也知道flexbox解决方案，但是鉴于目前对浏览器的支持稀疏，这也不是一种选择.

I know about flexbox solutions too, but given the sparse browser support at the moment, this is not an option either.

那么，是否有CSS解决脚注脚挑战的解决方案，它可以使脚注高度可变并且不使用javascript或flexbox?

So, is there a CSS solution to the sticky footer challenge that allows for a fluid footer height and does not use javascript or flexbox?

CSS专家，不胜感激.

CSS guru's, you're advice is appreciated.

推荐答案

您可以尝试CSS表方法:

You can try a CSS table approach:

html, body {
  height: 100%;
  margin: 0;
}
body {
  display: table;
  width: 100%;
}
.wrapper {
  display: table-row;
  height: 100%;
  background-color: red;
}
.footer {
  display: table-cell;
  background-color: green;
}
h1 {
  resize: vertical;
  overflow: auto;
  border: 2px solid;
}

<div class="wrapper">
  <h1>Resize me</h1>
</div>
<div class="footer">hello, <br />world!!</div>

这篇关于使用CSS的流体粘性页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！