La hauteur 100vh donne une barre de défilement verticale

Question

Je suis confronté à un problème avec la hauteur 100vh qui donne une barre de défilement verticale. J'intègre le contenu externe dans un div porte-widget d'une hauteur de 100vh. Mais le contenu du support de widget dépasse le div parent et donne une barre de défilement verticale.

Si je supprime l'en-tête fixe, je ne vois pas la barre de défilement verticale. Mais je ne peux pas supprimer cela. Si je réduis la hauteur du div détenteur du widget, certains contenus ne seront pas visibles. Je ne peux donc pas baisser la hauteur.

J'ai besoin d'une solution pour que le contenu du support du widget corresponde exactement à la hauteur du parent.

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

Est-ce ce que vous recherchez ?

En gros, j'ai simplement soustrait la hauteur de la bannière de la hauteur de l'écran.

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

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