设置height:100vh出现垂直滚动条的问题及解决方案需求

问题场景 #

当外部内容嵌入设置了height:100vh的.widget-holder容器时，内容超出父容器导致垂直滚动条出现。移除#fixed-header后滚动条消失，但该头部无法移除；若缩小.widget-holder的高度，部分内容会被隐藏，因此需要找到既能保留头部，又能让.widget-holder完全适配父容器高度的方案。

原始代码 #

CSS

html {
  --banner-menu-width: 250px;
  --ps-facets-width: 280px;
  --left-column-width: 349px;
  --main-column-width: 890px;
  --right-column-width: 0px;
}

* {
  box-shadow: none;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  caret-color: #4181af;
  font-size: 12px;
  line-height: 142%;
  margin: 0;
  overflow-y: scroll;
  background-color: #f3f3f4;
  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  height: 100%;
}

#app {
  display: grid;
  grid-template-columns: 0 250px auto;
  grid-template-rows: auto;
}

#app-content {
  background-color: #f3f3f4;
  grid-column: 3;
  display: grid;
  grid-template-columns: 100%;
  /* height: 100vh; */
}

#fixed-header {
  display: grid;
  grid-template-columns: 100%;
  background-color: antiquewhite;
  top: 0;
  position: sticky;
  z-index: 400;
  height: 60px;
}

#app #dynamic-style {
  visibility: hidden;
  grid-column: 1;
}

#app #banner {
  grid-column: 2;
  grid-row-start: 1;
  grid-row-end: -1;
  min-height: 100vh;
  max-height: 5000px;
  display: flex;
  justify-content: stretch;
  position: fixed;
  width: var(--banner-menu-width);
  z-index: 450;
}

#app #banner .banner-background {
  background: #223645;
  z-index: 500;
  align-self: stretch;
  width: 100%;
}

.dashboard-container {
  height: 100%;
}

.widget-holder {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: Arial, sans-serif;
  background: aqua;
}

HTML

<div id="app" class="grid-container">
  <div id="dynamic-style"></div>
  <div id="banner">
    <div class="banner-background"></div>
  </div>
  <div id="app-content" class="regular-workspace">
    <div id="fixed-header"></div>
    <div class="dashboard-container">
      <div class="widget-holder"></div>
    </div>
  </div>
</div>

核心原因 #

#fixed-header为sticky定位且固定高度60px，.widget-holder设置height:100vh会占满整个视口高度，两者叠加后总高度超过视口，触发垂直滚动条。

解决方案 #

方案一：用calc()直接计算可用高度 #

直接调整.widget-holder的高度，减去#fixed-header的固定高度：

.widget-holder {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px); /* 减去header的60px高度 */
  font-family: Arial, sans-serif;
  background: aqua;
}

.dashboard-container {
  height: 100%;
  margin: 0; /* 确保无额外边距干扰 */
}

方案二：Flex布局自动填充剩余空间 #

重构#app-content为垂直Flex布局，让内容区自动占据头部之外的剩余空间，无需手动计算高度：

#app-content {
  background-color: #f3f3f4;
  grid-column: 3;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 确保容器占满视口 */
}

#fixed-header {
  display: grid;
  grid-template-columns: 100%;
  background-color: antiquewhite;
  top: 0;
  position: sticky;
  z-index: 400;
  height: 60px;
  flex-shrink: 0; /* 固定头部高度，不被压缩 */
}

.dashboard-container {
  flex: 1; /* 自动填充剩余空间 */
  overflow: hidden; /* 避免内部内容溢出影响整体布局 */
}

.widget-holder {
  display: flex;
  flex-direction: column;
  height: 100%; /* 继承父容器的可用高度 */
  font-family: Arial, sans-serif;
  background: aqua;
}

方案三：Grid布局明确分配高度 #

如果坚持使用Grid布局，可通过grid-template-rows明确分配头部和内容区的高度：

#app-content {
  background-color: #f3f3f4;
  grid-column: 3;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 60px 1fr; /* 第一行给header，第二行占剩余空间 */
  min-height: 100vh;
}

#fixed-header {
  grid-row: 1; /* 指定header所在行 */
  display: grid;
  grid-template-columns: 100%;
  background-color: antiquewhite;
  top: 0;
  position: sticky;
  z-index: 400;
  height: 60px;
}

.dashboard-container {
  grid-row: 2; /* 指定内容区所在行 */
  height: 100%;
}

.widget-holder {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: Arial, sans-serif;
  background: aqua;
}

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