How do I set the height of a child component?

Question

So I'm using Angular 2 to build my personal website. I have a header at the top of the page that contains navigation buttons just like Youtube's Home, Trending, and Subscriptions buttons on their navbar.

However, I don't really like how the scrollbar extends to the very top of the page where it's side by side with the header. I want my scrollbar to start from the bottom of the header and extend to the bottom of the page.

This is what the default appearance looks like:

Notice how the scroll bar is side-by-side with the header. I don't like how that looks.

This is what I'm going for:

Notice how the scroll bar is underneath the header. However, the component extends and doesn't stop at the bottom of the page. As a result I can't even scroll. I can fix this by setting the height of the component to some pixel value but it doesn't work if I use %.

TL;DR:

How do I set the height of a component as a percentage or calc(somepercent% - somenumberpx);

The code for this project is here: https://github.com/piusnyakoojo/personal-website

Answer 1

You can get the window height by javascript window.innerHeight. You also have to recalculate the window height on window.onresize event, and re-set the contents div height.

Answer 2

To fix this I changed the height of the component's body to 100vh to make the height 100% of the window height.

So for example, let's say the Component that's loaded in the

<router-outlet></router-outlet>

has a template that looks like this:

<div class="body">
  //.. some content
</div>

Place this in the style sheet:

.body {
  height: 100vh;
}

For my particular situation, I had to adjust this since the header is about 50px of the total height of the window. So I have:

.body {
  height: calc(100vh - 50px);
}

Read more about how you can use vh here: Make div 100% height of browser window