使用Flexbox无法实现元素固定在视口底部的问题求助

你的代码核心问题有两个：

• 未给根元素<html>设置高度，导致body的min-height: 100%无法基于视口高度生效
• .top的flex-grow: 1会让该元素占据所有可用空间，无法停留在顶部

修正后的完整代码 #

HTML

<html>
  <body>
    <div class="top">
      <p class="text">Top</p>
    </div>
    <div class="bottom">
      <p class="text">Bottom</p>
    </div>
  </body>
</html>

CSS

html, body {
  height: 100vh; /* 让html和body铺满整个视口高度 */
  margin: 0; /* 清除默认边距，避免出现滚动条 */
}

body {
  display: flex;
  flex-direction: column;
}

.bottom {
  margin-top: auto; /* 利用auto margin将元素推到容器底部 */
}

关键说明 #

1. html, body { height: 100vh }：100vh代表视口高度的100%，直接让根元素和body铺满整个视口，确保Flex容器有足够高度分配空间。如果偏好百分比写法，可设置html { height: 100%; } body { min-height: 100%; }，但vh更直观。
2. 移除.top的flex-grow:1：flex-grow属性会让元素占据容器内剩余可用空间，这会导致.top被拉长，无法停留在顶部。
3. margin-top: auto：Flex布局中，auto margin会自动填充容器内的剩余空间，从而将.bottom元素推到容器最底部。

内容的提问来源于stack exchange，提问作者Alessandro