How to set 100 % height without having a vertical scrollbar?

Question

Context

I have a navbar with a fixed height. I want the space underneath to fill the rest of the screen vertically. I also need to have a fixed height because I have a container inside the page that has a list that is scrollable but without scrolling the whole page overflow: hidden

The Problem

When I set a height on all parent elements of 100% I get a vertical scrollbar. I found some answers on SO about "margin collapse" but nothing that could solve my problem. 100vh also won't work without having a scrollbar.

Here is the css for setup the height (#__next is just a div where next.js renders the page):

html,
body,
#__next {
  height: 100%;
  width: 100%;
}

The navbar is just a fixed pixel height, and the space below has height: 100%

Here is a screenshot that shows the vertical scrollbar:

I can't find any problems on the chrome inspector.

This is how it should look (design file):

Do you know how to solve this? I need to have both containers from screen "SippetPanel" and "SnippetContent" to take the remaining height without adding a scrollbar. It should also work to have a inner scrollbar with overflow hidden (later on when there are many items in the list like from design file)

Answer 1

Be aware that percentual heights refer to the height of the parent. You can use calc() to solve your issue:

#__next{
    height: calc(100% - navbarpx);
    ...
}

calc()

For the padding issue you can look into border-box .

Answer 2

I usually just try different vh values, that means 90vh, 95.5vh etc. so it all sits perfectly. You can try to meddle with body position: absolute etc., but that would push everything into the navbar, so then you would need to fix it with additional margin-top.

So the best solution I see is to try different vh values for the height and find the sweet spot. You will need to do the same for different phone types as well with media queries, but it shoudn't really be hard.

Answer 3

One of the ways is to use flex-box, it allows you to explicitly say(take all available height.

 .body { display: flex; flex-direction: column; }.navbar { flex: 30px 0 0; /* 30px height and do not grow or shint */ background: red; }.content { flex-grow: 1; /* take all available space */ background: blue; }.body, html, body { width: 100%; height: 100%; }

 <div class="body"> <div class="navbar"></div> <div class="content"></div> </div>