Navbar + 2 full height columns + Footer with Flexbox

Question

Each individual problem from this has already been solved:

how to put a navbar in Flexbox
how to put a 2 full height columns in Flexbox
how to put a footer which only appears after the end of columns.

But I can't figure it out to do the 3 at the same time.

What I want:

With few text, the 2 columns expands but the footer stays at the bottom. No scrollbar is displayed.

+------------------------------+   
|            NAVBAR            |    
|-------------+-+------------+-|
|| blah blah  | | blah blah  | |
|| blah blah  | | blah blah  | |
|| blah blah  | | blah blah  | |
||            | | blah blah  | |
||            | | blah blah  | |
||            | |            | |
||            | |            | |
||            | |            | |
||            | |            | |
||            | |            | |
+------------------------------+   
|           FOOTER             |    
<========END OF SCREEN=========>

With lots of text, the footer doesn't appear. scrollbar is displayed. After scrolling, the footer appear at the bottom.

+------------------------------+   
|            NAVBAR            |    
|-------------+-+------------+-|
|| blah blah  | | blah blah  | |
|| blah blah  | | blah blah  | |
|| blah blah  | | blah blah  | |
|| blah blah  | | blah blah  | |    
|| blah blah  | | blah blah  | |
|| blah blah  | | blah blah  | |   
|| blah blah  | | blah blah  | |
|| blah blah  | | blah blah  | |    
||            | | blah blah  | |   
||            | | blah blah  | |
||            | | blah blah  | |
||            | | blah blah  | |
<========END OF SCREEN=========>

After scrolling:

||            | | blah blah  | |    
||            | | blah blah  | |   
||            | | blah blah  | |
||            | | blah blah  | |
||            | | blah blah  | |
+------------------------------+   
|           FOOTER             |    
<========END OF SCREEN=========>

Here's a snippet which is the closest to the solution:

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
}
header, footer {
  flex-grow: 0;
}
main {
  flex-grow: 1;
  
}
footer {
  background-color: #eee;
}

#red {
  background-color: red;
}

#blue {
  background-color: blue;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <header>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <form class="form-inline mt-2 mt-md-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
</header>
<main role="main">
<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
      <div class="col" id="red">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam ut porttitor leo a. Metus dictum at tempor commodo. Feugiat vivamus at augue eget arcu dictum. Amet consectetur adipiscing elit duis tristique 
</div>
<div class="col" id="blue">
<p>Mi ipsum faucibus vitae aliquet nec. Diam vel quam elementum pulvinar etiam non. Sit amet risus nullam eget felis eget nunc lobortis mattis. Integer malesuada nunc vel risus commodo. Ut faucibus pulvinar elementum integer enim neque. Id interdum velit laoreet id donec ultrices tincidunt. Sodales ut etiam sit amet nisl purus in. Et sollicitudin ac orci phasellus 
    </div>
    </div>
  </div>
  </main>
  <footer class="footer mt-auto py-3">
  <div class="container">
    <span class="text-muted">I'm your footer. Always at the bottom of the screen. When the page content is too tall, I get pushed down. I also adjust my height according to my contents.</span>
  </div>
</footer>
<!-- Optional JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
  </body>
</html>

But the columns aren't expanding if there is only a few text: go into "full page" on the snippet to see that the blue and red column aren't expanding).

added solution @thephi – Avinash Dalvi Jun 12 '20 at 13:41 — Avinash Dalvi, Jun 12 '20 at 13:41

Carol Skelly · Accepted Answer · 2020-06-12T14:26:46.083

Continue with flex-grow on the main container and row...

<main role="main" class="d-flex">
    <div class="container d-flex flex-column flex-grow-1">
        <h1>Hello, world!</h1>
        <div class="row flex-grow-1">
            <div class="col" id="red">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam ut porttitor leo a. Metus dictum at tempor commodo. Feugiat vivamus at augue eget arcu dictum. Amet consectetur adipiscing elit duis tristique
            </div>
            <div class="col" id="blue">
                <p>Mi ipsum faucibus vitae aliquet nec. Diam vel quam elementum pulvinar etiam non. Sit amet risus nullam eget felis eget nunc lobortis mattis. Integer malesuada nunc vel risus commodo. Ut faucibus pulvinar elementum integer enim neque. Id interdum velit laoreet id donec ultrices tincidunt. Sodales ut etiam sit amet nisl purus in. Et sollicitudin ac orci phasellus
            </div>
        </div>
    </div>
</main>

Demo: https://codeply.com/p/H6HQFifTQN

Related: Bootstrap 4 Flexbox force rows to fill vertical space inside col

Avinash Dalvi · Answer 2 · 2020-06-12T13:45:09.837

tried this :

html, body, main
{
  height: 100%;
}
footer {
  background-color: #eee;
  position:fixed;
  bottom:0;
  width:100%;
display:block;
}
.container{ 
  width: 100%;
  overflow: auto;
  height: 100%;
  margin-bottom: -120px;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
}
html, body, main
{
  height: 100%;
}
.container{ 
  width: 100%;
  overflow: auto;
  height: 100%;
  margin-bottom: -120px;
}

header,
footer {
  flex-grow: 0;
}

main {
  flex-grow: 1;
}

footer {
  background-color: #eee;
  position: fixed;
  bottom: 0;
  width: 100%;
  display:block;
}

#red {
  background-color: red;
}

#blue {
  background-color: blue;
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

  <title>Hello, world!</title>
</head>

<body>
  <header>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Logo</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline mt-2 mt-md-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
  </header>
  <main role="main">
    <div class="container">
      <h1>Hello, world!</h1>
      <div class="row">
        <div class="col" id="red">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam ut porttitor leo a. Metus dictum at tempor commodo. Feugiat vivamus at augue eget arcu dictum. Amet consectetur
            adipiscing elit duis tristique
        </div>
        <div class="col" id="blue">
          <p>Mi ipsum faucibus vitae aliquet nec. Diam vel quam elementum pulvinar etiam non. Sit amet risus nullam eget felis eget nunc lobortis mattis. Integer malesuada nunc vel risus commodo. Ut faucibus pulvinar elementum integer enim neque. Id interdum
            velit laoreet id donec ultrices tincidunt. Sodales ut etiam sit amet nisl purus in. Et sollicitudin ac orci phasellus
        </div>
      </div>
    </div>
  </main>
  <footer class="footer mt-auto py-3">
    <div class="container">
      <span class="text-muted">I'm your footer. Always at the bottom of the screen. When the page content is too tall, I get pushed down. I also adjust my height according to my contents.</span>
    </div>
  </footer>
  <!-- Optional JavaScript -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>

</html>

thanks! but if I go in "Full page" on the snippet, the blue and red column don't appear to expand until the bottom. — ThePhi, Jun 12 '20 at 13:41
Blue and red columns are still not expanding on the "Full page" of the snippet. I'd like no blank space between the columns and the footer. — ThePhi, Jun 12 '20 at 13:51

Navbar + 2 full height columns + Footer with Flexbox

2 Answers2