I have an angular app that uses bootstrap 4. I have a nav bar that sticks to the top, and I want to add content that fills the remaining space in the browser. Aside from the navbar at the top, I have another div that itself contains header and footer content. Between the header and footer, I have a main content section, and I want that section (#two
in my example below) to fill all empty space.
I thought I could use css flexbox to accomplish this, but my simple non-bootstrap flexbox example seemed to do nothing when I moved into the bootstrap world. I was using these docs to try to figure this out.
I thought using align-self-stretch
should help accomplish this goal, but it sort of looks like the containing elements might be sizing themselves just big enough to hold my #outer
content, so there's no flexbox expanding to be done. I tried naively just adding height:100%
styles to the containing divs just to try to get some stretching, but that didn't seem to help.
I created this plunker example based on @ZimSystem's response. His codeply example seemed to work exactly as I wanted, but when I tried to piece the changes into my simple angular code, the flex stretching didn't happen. I'm not sure what I'm doing to break it in the conversion.
This is the entirety of the angular component I am viewing at the moment:
<div id="outer" class="d-flex flex-column flex-grow">
<div id="one" class="">
header content <br>
another line <br>
And another
</div>
<div id="two" class="bg-info h-100 flex-grow">
main content that I want to expand to cover remaining available height
</div>
<div id="three" class="">
footer content
</div>
</div>
And here's the application container showing the navbar and injection point:
<div class="d-flex flex-column h-100">
<nav class="navbar navbar-toggleable-md sticky-top bg-faded">
<a class="navbar-brand" href="#">
<h1 class="navbar-brand mb-0">My App</h1>
</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" routerLink="/flex">My flex view</a></li>
</ul>
</nav>
<router-outlet></router-outlet>
</div>
How can I get my #two
div to expand to fill the space while having my #one
and #three
divs acting as content headers and footers anchored to the top and bottom of the content area?