I have a page where I've set all parent elements to a height of 100%, including the root of the app. However, when I reach a component in the body, it seems to be ignoring the height settings. Even though my dev tools show that the direct parent of ".main-container-employee" has a height of 100%, the component is still not displaying correctly. I've tried setting the styles of ".main-container-employee" inline to avoid any issues with the shadow DOM, but it's not working. Any assistance would be greatly appreciated!
https://i.sstatic.net/zatH1.png
In my styles.scss file, I have the following code:
:root,
html,
body {
height: 100%;
min-height: 100%;
}
.main-container-employee {
min-height: 100%;
height: 100%;
display: block;
}
In the App.component html, I have the following code:
<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>