Bootstrap 4.0 - responsive header with image + navbar + full-height body

Question

I am building a responsive page with bootstrap 4 which has a heading/title section with an image of the client\'s logo, their name and a navbar. All these elements are responsiv

Answer 1

Instead of setting defined heights, use flexbox to make the content area fill the height of it's parent container (which in this case is the body).

body {
    display:flex;
    flex-direction:column;
}

.flex-fill {
    flex: 1 1 auto;
}

.flex-shrink {
    flex-shrink: 0;
}

https://www.codeply.com/go/fKNRvG0Hak

Note: The flex-fill utility class will be included in the next Bootstrap 4 release: https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9

---

Similar questions:
Make a nested row fill its parent that has been made to fill viewport height using flex-grow in Bootstrap 4?
Bootstrap 4 Navbar and content fill height flexbox
Bootstrap 4 page wide header bar above navbar