Flex布局对齐异常：底部文本显示在屏幕可视区域之外

嘿，我来帮你搞定这个Flex布局的问题！你的代码里出现文本跑到可视区域外的情况，核心原因是外层容器#Main的高度设置和内部子元素的高度叠加导致总高度超过了视口。让我一步步给你分析和修正：

问题根源 #

你给body和html设置了height: 100%，但#Main只用了min-height: 100%，同时BottomAligned类的div又设置了height: 100%。这就意味着：

• 上面的Line1/Line2 div会占用一部分高度
• 下面的Bottom div高度等于父容器#Main的100%（也就是视口高度）
  两者加起来的总高度肯定超过了视口，自然会把TextBottom挤到可视区域外面去。

解决方案：两种简单的修正方式 #

方式一：把#Main改成Flex容器（推荐） #

这种方式更符合Flex布局的思路，让容器自动分配子元素的空间，不需要给子元素设置100%高度：

body, html { 
  height: 100%; 
  margin: 0; /* 去掉默认边距，避免出现滚动条 */
}
#Main {
  min-height: 100%;
  display: flex;
  flex-direction: column; /* 让子元素垂直排列 */
  justify-content: space-between; /* 上下子元素分别靠顶部和底部 */
}
/* 不需要再给BottomAligned设置height:100%了 */
div.BottomAligned { 
  width: 100%; 
  display: flex; 
  align-items: flex-end; 
  justify-content: center; 
  overflow: hidden; 
}

对应的HTML保持不变：

<div id="Main">
  <div> Line1<br> Line2 </div>
  <div id="Bottom" class="BottomAligned"> TextBottom </div>
</div>

方式二：给BottomAligned设置margin-top: auto #

如果你不想改动#Main的布局，也可以通过自动外边距让底部元素“粘”在容器底部：

body, html { 
  height: 100%; 
  margin: 0;
}
#Main {
  min-height: 100%;
  position: relative; /* 让子元素的margin-top:auto生效 */
}
div.BottomAligned { 
  width: 100%; 
  display: flex; 
  align-items: flex-end; 
  justify-content: center; 
  overflow: hidden; 
  margin-top: auto; /* 自动占据上方剩余空间，把自己推到底部 */
}

效果验证 #

两种方式都能让TextBottom稳稳地显示在屏幕底部，同时不会被上方的内容挤出去，也不会出现不必要的滚动条。

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