How to make a Z-index =1 div to occupy entire height

user_17175848 0
Viewed 75

As shown in the image, I have a sidebar that opens over other elements (blue color) using z-index = 1. On opening the sidebar i don't want users to see any other elements other than the sidebar. But at the end of the sidebar, I'm seeing other elements part of the page as shown in the image (Sheets A, Sheets B).

I tried giving 100vh, 500vh, 100%, auto but none of these is working. Any way to make the Z-index =1 element occupy the entire vertical screen

enter image description here

.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>
css html
1 Answers

You can achieve this result by using a combination of CSS properties such as overflow, display, height and width. In my example, I make the navbar element occupy the entire screen by setting its height to 100vh (100% of the vertical viewport) and prevent any vertical scrolling and display of other items by using the overflow-y property to hidden. When we click the button element, it toggles the display property to flex for the nav element. Example below.

$('.btn').click(function() {
    $('nav').toggleClass('open');
});
nav {
height:100vh;
width:100vw;
background:pink;
overflow-y:hidden;
position:fixed;
top:0;
left:0;
display:none;
flex-direction:column;
}

nav.open {
display:flex;
}

.btn {
position:absolute;
top:25px;right:25px;
z-index:2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div>some other page content above some other page content above some other page content above some other page content abovesome other page content above</div>
<button class='btn'>btn</button>
<nav>
  <span>some nav item 1</span>
  <span>some nav item 1</span>
  <span>some nav item 1</span>
</nav>
<div>some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below</div>
<div>some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below</div>
<div>some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below</div>
<div>some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below</div>
</body>

user_111350920
Related