I have a question that may seem basic, but I've been struggling to find a solution. Despite searching for answers, none of the suggestions I've come across have worked for me. My application has two main containers - a header and a content div. The challenge is to make the content div dynamically reach the bottom of the page based on the browser size.
I attempted using properties like height:100vw, but it made the page too long and added a scroll bar. Setting the height to 100% had no effect either.
My setup involves Angular with Bootstrap and ui.bootstrap. Here's how it's loaded into the index:
<div class="app-container">
<navbar></navbar>
<div ng-view=""></div>
<div class="footer"></div>
</div>
The navbar is a custom directive that loads a template, while ng-view looks like this:
<div class="content-container">
//content
</div>
In essence, I need the content-container div to always extend to the bottom of the page. I've explored JavaScript solutions, but haven't found any specific to Angular.
Solution
(credit to Vinc199789)
height:calc(100vh - header_height);