如何用CSS布局工作区并将应用约束在100vh内？

针对你遇到的布局溢出、突破max-width问题，核心是让容器严格限制在视口高度内，同时给可滚动的内容区单独设置溢出规则，以下是两种可靠方案：

方案一：修正CSS Grid布局 #

给根容器设置固定视口高度、网格行分配规则，同时限制最大宽度并居中，内容区单独处理滚动：

/* 重置全局默认样式，避免额外边距导致溢出 */
body {
  margin: 0;
  padding: 0;
}

/* 根容器：限制在100vh内，水平居中且不超max-width */
.app-container {
  max-width: 1200px; /* 替换为你的目标最大宽度 */
  margin: 0 auto;
  height: 100vh;
  display: grid;
  /* 头部、内容区、底部：头部/底部自适应高度，内容区占满剩余空间 */
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  overflow: hidden; /* 防止容器整体溢出视口 */
}

/* 内容区：超出时垂直滚动 */
.content-area {
  overflow-y: auto;
  padding: 1rem; /* 可选：添加内边距避免内容贴边 */
}

/* 头部和底部样式示例 */
.header, .footer {
  padding: 1rem;
  background: #f5f5f5;
}

原理：grid-template-rows: auto 1fr auto让内容区自动填充头部、底部之外的剩余空间，容器设height:100vh和overflow:hidden确保整体不超出视口，max-width + margin:auto保证水平方向不突破宽度限制。

方案二：Flexbox布局实现 #

如果Grid用着不顺，Flexbox是更简洁的替代方案：

body {
  margin: 0;
  padding: 0;
}

.app-container {
  max-width: 1200px;
  margin: 0 auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content-area {
  flex: 1; /* 占满容器剩余垂直空间 */
  overflow-y: auto;
  padding: 1rem;
}

.header, .footer {
  padding: 1rem;
  background: #f5f5f5;
}

原理：flex-direction: column让元素垂直排列，flex:1给内容区分配剩余空间，同样通过容器的height:100vh和overflow:hidden锁定视口高度。

关键注意事项 #

• 不要给整个容器设置overflow:auto，否则头部和底部会跟着内容一起滚动，只给内容区单独设置overflow-y:auto
• 若头部/底部需要固定高度，可直接替换auto为具体数值（比如grid-template-rows: 60px 1fr 40px）
• 确保全局样式重置默认边距，避免body的默认margin导致页面出现额外滚动条

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