I am facing issue with height 100vh which is giving vertical scrollbar. I embed the external content in a widget-holder div with a height of 100vh. But the content in widget-holder exceeds the parent div and gives vertical scrollbar.
If I remove the fixed header, I don't see the vertical scrollbar. But I can't delete this. If I reduce the height of the widget-holder div, some content will not be visible. So I can't lower the height.
I need a solution to make the widget holder content exactly match 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" 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>
P粉0837850142024-03-28 12:53:16
Is this what you are 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; }