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

user_4809938 0
Viewed 25331

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?

angular css
7 Answers

do this in your main style.css 

  html, body {
    min-height: 100vh;
    height: auto;
    margin: 0;
    overflow: auto;
  }

setting height to 100% on all your elements including 'app-root' should now work

user_98107880

In your style.(s)css

app-root {
  min-height: 100vh;
}
user_30292630

Another way to do it would be combining @ackuser and @LookForAngular answers with flex, which is now the standard. This way, in the root styles.scss of the app we could have something like:

body {
  min-height: 100vh;
  display: flex;
}

And then, in app.component.scss:

:host {
  display: flex;
  flex-grow: 1;
}
user_39500520
Related