Looking at the image, I have a sidebar that opens over other elements (blue color) using z-index = 1. When the sidebar is open, I want to hide all other elements except for the sidebar. However, towards the end of the sidebar, I can still see other elements from the page such as Sheets A and Sheets B.
I have tried setting different values like 100vh, 500vh, 100%, auto but none seem to work. Is there a way to make the element with Z-index = 1 occupy the entire vertical screen?
https://i.stack.imgur.com/M2Uib.png
.navigationbar--open .navigationbar__body {
max-height: auto;
opacity: 1;
}
html
<div className="navigationbar--open">
<div className="navigationbar__heading">
<div className="foldersection">
<img src={image} className="navbar__icon" />
</div>
<FaSortDown />
</div>
<div className="navigationbar__body">
<li>Folder A</li>
<li>Folder B</li>
<li>Folder C</li>
))}
</div>
</div>