无论内容高度如何，如何将页脚保留在页面底部？

页面或内容底部的页脚

问题：

动态加载内容高度可以变化。目标是将

定位到底部。当内容较多时位于页面底部，当内容有限时位于浏览器窗口底部。

答案：

Flexbox 版本：

对于支持 Flexbox 的浏览器，一个简单的解决方案是使用 display: flex 属性以及高度包装元素 (#main-wrapper) 为 100%。这可确保包装器拉伸以填充整个视口。

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

在包装器内，

flex 值应该为 1，这允许它垂直扩展。这确保了始终会被推到页面底部或内容底部，具体取决于哪个较大。

article {
  flex: 1;
}

修订的 HTML：

<div>

以上是无论内容高度如何，如何将页脚保留在页面底部？的详细内容。更多信息请关注PHP中文网其他相关文章！