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.
![enter image description here](https://i.stack.imgur.com/TwK24.png)
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?
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…