Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In Angular2, how to make <app-root> 100% height

Tags:

css

angular

I am using Angular2 and I want to set the height of <app-root> to 100% of <body>.

Currently I have:

<body>
  <app-root></app-root>
</body>

and in CSS file I've set:

app-root {
  height: 100%;
}

but it seems nothing changed.

Do you have any idea?

like image 553
Zanecat Avatar asked Jul 14 '17 06:07

Zanecat


Video Answer


2 Answers

In the component css use the :host selector

:host {
    height: 100%
}
like image 74
LookForAngular Avatar answered Sep 19 '22 12:09

LookForAngular


Just set display property to block:

app-root {
  display: block;
  height: 100%;
}

All custom elements are created as inline so you cannot manipulate their dimensions. You need to make them block elements.

like image 21
Max Koretskyi Avatar answered Sep 17 '22 12:09

Max Koretskyi