高度 100vh 给出垂直滚动条

Question

我面临高度 100vh 的问题，它给出了垂直滚动条。 我将外部内容嵌入高度为 100vh 的 widger-holder div 中。但是 widget-holder 中的内容超出了父 div 并给出了垂直滚动条。

如果我删除固定标题，我就看不到垂直滚动条。但我无法删除这个。 如果我减小 widget-holder div 的高度，某些内容将不可见。所以我无法降低高度。

我需要一个解决方案来使小部件支架内容与父高度完全匹配。

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;
}

<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>

Answer 1

这是您要找的吗？

我基本上只是从屏幕高度中减去横幅高度。

.dashboard-container {
    height: calc(100vh - 60px);
}

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