I have a scrolling issue that might be common but I can't seem to find it. Essentially, I have a scrollable section of a webpage that goes from just below the header to the bottom of the screen. However, to make that section scrollable, I have to set a height which I set as 70vh, while the header is a static height. When the viewport changes height, to a larger screen for example, the 70vh isn't enough to reach the bottom of the screen because it now should proportionally take up more space.

My question is, how do I make it so that the section is always the correct height when the viewport changes size. An idea I had was to find the percentage of the viewport height that the header is taking up and then detract that from 100 variably, but I have no clue how to do that.

I can't add images in my post yet but this is a link to what the section looks like

CodePudding user response：

You can use calc()

.scrollable {
  height: calc(100vh - 80px /* Height of your header */);
}

However you will need to do this for each breakpoint on your website, that changes height of your header, and 100vh can sometimes be obstructed by a browser's "elements" like URL bar on mobile etc.