Sidebar height varies with content length

Question

I am having a problem with the length of my sidebar in my angular2 app. I have a navigation component which includes both top navigation html and sidebar navigation html. When the app loads the sidebar is fine. If i route to other components the sidebar becomes short or long depending on that component length. I want to fix the height of sidebar. Please see images to understand what i am trying to say. The theme template was taken from here .

Fig 1 - When the app loads

Fig 2- When navigate to other component

Fig 3 - It becomes more short

loggedIn.component.html

<div class="wrapper">
    <bmis-navigation></bmis-navigation>
    <router-outlet></router-outlet>
</div>

navigation.component.html
The html is here The css files are linked below. 1- Admin.css 2- red.css

Answer 1

There is no CSS, so it's hard to diagnose this problem. That being said, based on the code provided I would guess your problem lies in there, more than the DOM itself.

Have you given setting a min-height on the main-sidebar class, or a similar solution? I would suggest, depending on your needs, something along these lines:

.main-sidebar {
  min-height: ~"calc(100vh - @navigation-height)";
}

Again, there isn't much context as far as the styling, but I hope this helps!

PS I apologize if my LESS syntax is off at all, I believe you're using it, but I'm out of practice.

Answer 2

I have no experience with Angular or what you are using.

But I think setting a min-height for your sidebar would solve the issue.