如何让中间div适配头部尾部并填满视口水平空间，实现无溢出布局？

问题分析 #

当前布局中，section设置了height: calc(100vh - 2rem)，但内部的chat容器用height:100%会忽略header和footer的高度，导致整体内容溢出视口，无法满足全视口适配且无溢出的需求。

解决方案：使用Flexbox布局 #

通过Flexbox可轻松实现自适应布局，让chat容器自动填充header和footer之外的剩余空间，同时保证整体布局不超出视口范围。

修改后的HTML代码 #

<div class="navbar">
navbar
</div>
<section>
  <header>header</header>
  <div class="chat">
  chat window
  </div>
  <footer>
    <textarea>chat enter</textarea>
  </footer>
</section>

修改后的CSS代码 #

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: 1px solid gray;
}

body {
  /* 避免浏览器默认样式导致的视口外溢出 */
  overflow: hidden;
}

.navbar {
  height: 2rem;
}

section {
  height: calc(100vh - 2rem);
  /* 将section设为垂直方向的flex容器 */
  display: flex;
  flex-direction: column;
}

.chat {
  background-color: green;
  /* 自动填充header和footer之外的剩余空间 */
  flex: 1;
  /* 内容过多时内部滚动，不溢出页面 */
  overflow-y: auto;
}

header, footer {
  /* 禁止压缩，保持自身高度 */
  flex-shrink: 0;
}

关键修改说明 #

• 给body添加overflow: hidden，规避浏览器默认边距引发的页面溢出问题。
• 将section设置为Flex容器并指定垂直排列，让内部元素按垂直方向自动布局。
• 给chat容器设置flex: 1，使其自动占据header和footer之外的所有剩余空间。
• 给header和footer设置flex-shrink: 0，确保它们不会被压缩，保持原有高度。
• 给chat添加overflow-y: auto，当聊天内容过多时，容器内部会出现滚动条，避免整个页面溢出。

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