Scrollbar not scrolling completely down the page

Question

I have this minor issue. I have a main div with class scroll. I have several other input parameters where I take input from the user. This inputs fills up the entire page vertically.

Now I minimize the screen with Chrome minimize button. (i.e. restore down button). The page gets shrinked and a scrollbar shows up since it is set to overflow:scroll.

Now the problem is that it does not scroll till the end of the page. suppose there are 20 input parameters and when I minimize, I can scroll up to 18th input parameter only. Scrollbar doesn't go beyond 18 and hides the last 2 so the viewer is not able to see.

<div class="scroll">
</div>
<!-- Added this extra div below and now able to scroll the last 2 parameters as well -->
<div style="height:50px;">
</div>

.scroll {
height:100%;
overflow:scroll; 
}

Can someone please let me know if I did anything wrong.

Answer 1

possible causes:

• A vertical offset like margin-top: 100px or top: 100px combined with height: 100% when using position: absolute;. In this case change to height: calc(100% - 100px);

• The same with padding-top or padding-bottom. Possible solution: box-sizing: border-box;

But without code all this is guessing...

Answer 2

.scroll{
height: calc(100vh - 100%);
overflow-y: scroll;
}