height 100vh is giving vertical scrollbar-CodePudding

I am facing the problem with height 100vh , it gives vertical scrollbar. I am embedding the external content in widger-holder div which has height 100vh. But content in widget-holder exceeds parent div and gives vertical scroll bar.

If I remove the fixed header, I am not seeing a vertical scroll bar. But I can't remove this. And if I reduce the height in the widget-holder div, some content is not visual. So I am not able to reduce the height.

I need a solution to fit widget-holder content exactly with the parent height.

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" >
  <div id="dynamic-style"></div>
  <div id="banner">
    <div ></div>
  </div>
  <div id="app-content" >
    <div id="fixed-header"></div>
    <div >

      <div ></div>

    </div>
  </div>
</div>

CodePudding user response：

Is this what you're looking for?

I basically just subtracted the banner height from the screen height.

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

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

CodePudding user response：

You set your header sticky so that it occupies some space and change the top point of the page for the rest of its siblings. You can extract header's height from widget-holder's height.

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

In my experiments this fixed the issue.

Or you can use Grid in the right way, like

#app-content {
    background-color: #f3f3f4;
    grid-column: 3;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 60px 1fr;
    height: 100vh;
  }
.widget-holder {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: Arial, sans-serif;
    background: aqua;
  }