-1

I have made a page where I have set all parent elements their height to 100% including the app root. Still once I get to a component in the body it seems to ignore my height. If I use my dev tools it shows that the direct parent of ".main-container-employee" has 100% height. I have set the styles of the ".main-container-employee" inline to avoid any issue to shadow-dom but still no avail. Any help will be appreciated!

enter image description here

In styles.scss I have set the following code

:root,
html,
body {
  height: 100%;
  min-height: 100%;
}

.main-container-employee {
  min-height: 100%;
  height: 100%;
  display: block;
}

In App.component I have madethe following html

<div class="main-container-employee" style="height: 100%; min-height: 100%; display: block;">

  <div class="header-box">
      <abf-logo-bar></abf-logo-bar>
      <abf-navbar [routeList]="navbarRoutes"></abf-navbar>
  </div>
  
  <div class="content-container">
    test
  </div>
  
</div>
R. Wormsbecher
  • 33
  • 4

1 Answers1

-1

You're not understanding HTML right. You are giving your main-container-employee div a 100% height and that makes sense. The problem is, inside that you have two other divs.

The header-box div is wrapping the content you're putting inside it, thus its height is calculated through that.

The content-container div, which seems to be the problem you're pointing out is doing the same. It's wrapping the content you're putting inside, thus it does not expand to full height.

In order to expand the content-container div, you need to explicitly set its height to 100%.

I've created a demo with code similar to yours. Check it out.

Leonardo Freire
  • 269
  • 1
  • 7
  • It was never the case that I was using .content-container here. ,main-container-employee is not getting 100% while it's parent is. – R. Wormsbecher Dec 13 '21 at 12:24