Issue
My div
block has a top='70px'
property. When div
has a scroll, his also moves down, and the end of the scroll is not visible.
I added the following properties to the div, but it did not help:
div {
max-height: 100vh;
overflow: auto;
}
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>
Solution
You can use calc()
to subtract the div's top
from the screens total height,
something like this
div {
top: 70px;
height: calc(100vh - 70px);
}
Answered By - Sadra M.
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.