1

I have angular app with 3 nested components: App Component Inside the App component there is the tabs Component Inside the tabs component I have tabs

In order to give this components full height of the screen, I needed to go to each one of the components styles and to give it height: inherit or height: 100%, otherwise the nested component is not taking the full height of the page even though its parent have the full height.

My styles.scss:

html, body{
  height: 100vh;
  margin: 0px;
}

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

What is the correct approach, how to fix this problem correctly? Thanks

Zakk
  • 758
  • 3
  • 11
  • 20
  • The short answer is "that's just how it works". Elements will (by default) only take up as much space as they need - which is the amount of space required by their children. There are several ways to make an element fill its parent, the method you used seems fine to me – Vlad274 Jun 17 '19 at 17:17
  • Possible duplicate of [How to stretch div height to fill parent div - CSS](https://stackoverflow.com/questions/5581799/how-to-stretch-div-height-to-fill-parent-div-css) – Vlad274 Jun 17 '19 at 17:18

0 Answers0