Ketinggian 100vh memberikan bar skrol menegak

Question

Saya menghadapi masalah dengan ketinggian 100vh yang memberikan bar skrol menegak. Saya membenamkan kandungan luaran dalam div pemegang widget dengan ketinggian 100vh. Tetapi kandungan dalam pemegang widget melebihi div induk dan memberikan bar skrol menegak.

Jika saya mengalih keluar pengepala tetap, saya tidak nampak bar skrol menegak. Tetapi saya tidak boleh memadam ini. Jika saya mengurangkan ketinggian div pemegang widget, sesetengah kandungan tidak akan kelihatan. Jadi saya tidak boleh menurunkan ketinggian.

Saya memerlukan penyelesaian untuk menjadikan kandungan pemegang widget betul-betul sepadan dengan ketinggian ibu bapa.

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

Adakah ini yang anda cari?

Saya pada asasnya hanya menolak ketinggian sepanduk daripada ketinggian skrin.

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

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