My div element is set with a top='70px' property. However, when the div has content that requires scrolling, it moves down and the end of the scroll is not visible.
I tried adding the following properties to the div, but it did not resolve the issue:
div {
max-height: 100vh;
overflow: auto;
}
For example:
*, *::before, *::after {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
div {
position: fixed;
top: 70px;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
padding: 30px 30px 30px 30px;
max-height: 100vh;
overflow: auto;
}
div::before {
content: "";
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 70px;
background-color: #222;
z-index: 2;
}<div>
<ul>
<li><a href="">Section #1</a></li>
<li><a href="">Section #2</a></li>
<li><a href="">Section #3</a></li>
<li><a href="">Page #1</a></li>
<li><a href="">Page #2</a></li>
<li><a href="">Page #3</a></li>
<li><a href="">Page #4</a></li>
<li><a href="">Page #5</a></li>
<li><a href="">Page #6</a></li>
</ul>
</div>