Как установить высоту дочернего компонента?

Question

Итак, я использую Angular 2 для создания своего личного сайта. У меня есть заголовок в верхней части страницы, который содержит кнопки навигации, такие как кнопки Home, Trending и Subscriptions Youtube на их навигационной панели.

Однако мне не очень нравится, как полоса прокрутки простирается до самой верхней части страницы, где она бок о бок с заголовком. Я хочу, чтобы моя полоса прокрутки начиналась со дна заголовка и расширялась до нижней части страницы.

Это то, что внешний вид по умолчанию выглядит следующим образом:

Обратите внимание, как полоса прокрутки бок о бок с заголовком. Мне не нравится, как это выглядит.

Это то, что я иду:

Обратите внимание, как полоса прокрутки находится под заголовком. Однако компонент распространяется и не останавливается в нижней части страницы. В результате я не могу даже прокручивать. Я могу исправить это, установив высоту компонента на некоторое значение пикселя, но он не работает, если я использую%.

TL; DR:

Как установить высоту компонента в виде процента или известково (somepercent% - somenumberpx);

Код для этого проекта здесь: https://github.com/piusnyakoojo/personal-website

Answer 1

Вы можете получить высоту окна с помощью яваскрипта window.innerHeight. Вам также необходимо пересчитать высоту окна по событию window.onresize и переустановить содержимое div height.

Answer 2

Чтобы исправить это, я изменил высоту тела компонента на 100vh, чтобы сделать высоту 100% высоты окна.

Так, например, скажем, Компонент, который загружен в

<router-outlet></router-outlet> 

имеет шаблон, который выглядит следующим образом:

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

Место это в таблице стилей:

.body { 
    height: 100vh; 
} 

Для моей конкретной ситуации мне пришлось отрегулировать это, поскольку заголовок составляет около 50 пикселей общей высоты окна. Поэтому у меня есть:

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

Узнайте больше о том, как вы можете использовать здесь: VH Make div 100% height of browser window