如何实现水平线上下文本固定不越界的响应式分割布局

可以仅用2个div搭配padding实现该需求，彻底解决文本越界问题，实现代码如下：

完整代码 #

HTML #

<body>
  <div class="container">
    <div class="upper">ABOVE TEXT</div>
    <div class="lower">BELOW TEXT</div>
  </div>
</body>

CSS #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body, .container {
  height: 100%;
  width: 100%;
}
.container {
  display: flex;
  flex-direction: column;
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 2em;
}
.upper {
  flex: 1;
  background-color: pink;
  /* 文本靠底部居中 */
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* 控制文本和水平线的间距 */
  padding-bottom: 12px;
  /* 中间水平线 */
  border-bottom: 2px solid #000;
  /* 可选：加最小高度避免容器被挤压过小 */
  min-height: 100px;
}
.lower {
  flex: 1;
  background-color: lightblue;
  /* 文本靠顶部居中 */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* 控制文本和水平线的间距 */
  padding-top: 12px;
  /* 可选：加最小高度避免容器被挤压过小 */
  min-height: 100px;
}

实现逻辑 #

• 父容器占满全屏高度，上下两个div通过flex:1等分高度，天然在中间形成分割位置
• 两个区域完全独立，所有内容只会在各自容器内渲染，不会出现越过水平线的情况
• 通过padding直接控制文本和水平线的间距，匹配需求
• 若不想使用flex，也可以用grid布局实现，仅需将父容器样式替换为display: grid; grid-template-rows: 1fr 1fr;，其余样式保持一致即可。

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