Question

我知道有数百万个关于粘性页脚的例子，但是，我正在寻找更具体的解决方案。

如果内容很短，我想将页脚推到页面底部 - 我不希望它坐在那里寻找更长的页面（即固定定位）。

我已经有一个javascript解决方案，但是我正在寻找一个潜在的CSS解决方案，以便我可以放弃javascript。

我也了解flexbox解决方案，但鉴于目前浏览器支持稀疏，这也不是一种选择。

那么，是否有粘性页脚挑战的CSS解决方案允许流量页脚高度并且不使用javascript或flexbox？

CSS大师，你的建议值得赞赏。

Answer 1

您可以尝试使用CSS表格方法：

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的流体粘性页脚

1 个答案: