适用于可变高度粘性CSS页脚的现代跨浏览器解决方案

时间:2016-08-11 09:23:08

标签: html css html5 css3 web

如果我有这样的HTML页面:

<!DOCTYPE html>
<html>
  <body>
    ... some content or other ...
    <footer>... some footer text</footer>
  </body>
</html>

我希望<footer>元素坚持到页面的最底部(而不是视口,页面),即使没有足够的内容来填充页面,即使是高度页脚未知。

我知道但不符合标准的解决方案:

  • position: fixed; bottom: 0; - 这将粘贴到视口的底部,而不是页面
  • position: absolute; bottom: 0; - 这将位于视口的底部,但会在用户滚动时保持在同一位置
  • 将内容包含在min-height: 100%的容器中,然后使用页脚高度的边距 - 不适用于未知高度的页脚,并且需要额外的标记以启用样式
  • CSS Flexbox - 说实话,这看起来是最有前途的,但即使截至2016年,浏览器支持也不完整(IE中的支持仅限于IE11,并且存在问题)。

那么,任何现代解决方案?大约8年前我从网页设计中退休,最近又重新开始了,令我难以理解的是,这些基本任务仍然中有多少似乎需要基于固定大小调整的简单解决方案。

0 个答案:

没有答案