页面底部始终贴底怎么实现_利用flex column填满视口高度-css教程-PHP中文网

页面底部始终贴底怎么实现_利用flex column填满视口高度

P粉602998670

发布： 2025-12-23 18:08:02

原创

759人浏览过

最简洁可靠的页面底部贴底方案是Flexbox column布局配合min-height: 100vh：外层容器设display: flex、flex-direction: column、min-height: 100vh，main设flex: 1自动撑开留出底部空间。

页面底部始终贴底怎么实现_利用flex column填满视口高度

让页面底部始终贴底，最简洁可靠的方案就是用 Flexbox 的 column 布局配合 min-height: 100vh，而不是固定高度或 JS 计算。

给最外层容器（比如或一个包裹 <header></header>、<main></main>、<footer></footer> 的 <div class="app">）设置： <ul> <li><code>display: flex

flex-direction: column

min-height: 100vh（关键：确保至少撑满一屏，内容少时也能贴底）

把 <main></main>（或中间主要内容区域）设为 flex: 1，它会自动吸收剩余空间，把 <footer></footer> “推”到底部：

这些细节不注意会导致贴底失效或布局错乱：

HTML：

算家云

高效、便捷的人工智能算力服务平台

228

<div class="app">
  <header>页头</header>
  <main>主要内容</main>
  <footer>页脚</footer>
</div>

登录后复制

CSS：

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}

登录后复制

不复杂但容易忽略。

以上就是页面底部始终贴底怎么实现_利用flex column填满视口高度的详细内容，更多请关注php中文网其它相关文章！

页面底部始终贴底怎么实现_利用flex column填满视口高度