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

css angular

21,965

Solution 1

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.

Solution 2

In the component css use the :host selector

:host {
    height: 100%
}

Solution 3

Some time has passed, now I have had the problem. This is the solution that I am applying

In your app.component.css or desired component use this style

:host {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; 
  border: solid 3px yellow; /* for debugging purposes */
}

Solution 4

You can do it using simple javascript. On page load (or in your appComponent) you can set the height of app-root to be equal to window.innerHeight. So it will always take the height of your window.

View more solutions

21,965

Author by

Zanecat

Updated on July 09, 2022

Comments

Zanecat almost 2 years
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?