如何实现带滚动条的div布局，避免内容撑破浏览器视口

你的核心问题是主内容区（main）内的组件没有被正确限制高度，导致内容溢出时撑大整个布局。只需调整main和component的样式即可实现需求：

修改后的CSS代码 #

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: 3rem 1fr 3rem;
  font-family: system-ui, sans-serif;
}

header,
footer {
  background-color: lightblue;
  padding: 1rem;
  text-align: center;
}

main {
  padding: 2rem;
  text-align: center;
  /* 改为flex垂直布局，让内部元素自动分配空间 */
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 可选，给main内元素添加间距 */
}

.component {
  background-color: lightblue;
  padding: 1rem;
  /* 让组件填满main的剩余空间 */
  flex: 1;
  /* 内容溢出时显示垂直滚动条 */
  overflow-y: auto;
}

关键调整说明 #

• 移除main的height: 100%，改用display: flex; flex-direction: column，让main内部元素沿垂直方向排列，自动适配grid分配的1fr空间。
• 给component添加flex: 1，使其占据main内除其他元素（如<p>main</p>）之外的所有剩余空间，确保填满主内容区。
• overflow-y: auto会在component内容超出高度时自动显示滚动条，未溢出时隐藏滚动条（比scroll更美观）。

调整后，header、footer固定在浏览器顶部和底部，main始终处于中间区域，component内容溢出时仅自身出现滚动条，不会影响整体布局。

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