如何固定HTML页面布局并移除垂直滚动条？

需要将页面设置为固定布局，移除垂直滚动条并禁止向下滚动。当前添加两个动态高度的navbar后，页面底部出现可滚动的空白区域；单独使用3个面板的wrapper时页面可正常固定。要求保留黄色center1面板的自定义固定高度，同时适配navbar高度的动态变化。

核心思路 #

通过flex布局让页面元素自动适配视口高度，无需硬算navbar高度：

• 让body成为垂直方向的flex容器，高度占满整个视口，同时隐藏溢出内容以移除滚动条
• 包含navbar的header自适应自身高度，面板容器wrapper自动填充剩余视口空间
• 调整中间面板容器的内部布局，让固定高度的center1之外的区域自动填充剩余空间

修改后的CSS代码 #

body {
  margin: 0;
  /* 添加flex布局设置，固定页面整体高度并隐藏溢出 */
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* NAVBAR and SUB-NAVBAR */
.navbar {
  padding-top: 3px;
  padding-bottom: 3px;
}

/* 3 PANELS */
.wrapper {
  /* 替换原height:100vh，改为填充剩余空间 */
  height: 100%;
  width: 100vw;
  background: #333;
  border: 6px solid #666;
  display: flex;
  flex-grow: 1;
  overflow: hidden;
}

.pane {
  position: relative;
  color: #fff;
  min-width: var(--min-width);
}

.pane:last-child {
  flex-grow: 1;
}

.pane:has(.pane) {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.pane>.pane {
  min-height: var(--min-height);
}

.gutter {
  --l: 100%;
  --s: 10px;
  background: #666;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

.gutter-v {
  width: var(--s);
  height: var(--l);
  cursor: col-resize;
}

.gutter-h {
  height: var(--s);
  width: var(--l);
  cursor: row-resize;
}

.left {
  width: 600px;
}

.center_container {
  width: 650px;
  /* 开启垂直flex布局，让子面板自动分配高度 */
  display: flex;
  flex-direction: column;
}

.center1 {
  height: 700px;
  background-color: yellow;
}

.center2 {
  background-color: orange;
  /* 填充center1之外的剩余高度 */
  flex-grow: 1;
  /* 内部内容溢出时可滚动，不需要则改为overflow:hidden */
  overflow: auto;
}

#preview {
  display: block;
  width: 100%;
  height: 100%;
  background: #991717;
  border: 0;
}

关键修改点说明 #

1. body布局：设置display:flex; flex-direction:column; height:100vh; overflow:hidden，让页面整体高度固定为视口高度，溢出内容直接隐藏，彻底移除垂直滚动条。
2. wrapper适配：移除height:100vh，改为height:100%并添加flex-grow:1，使其自动填充header之后的剩余视口空间，无论navbar高度如何变化都能适配。
3. 中间面板容器：给center_container添加flex-direction:column，同时给center2设置flex-grow:1，让center2自动填充center1固定高度之外的剩余空间，避免内部内容溢出导致页面滚动。

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