Can't make 100% div height between header and footer with Bootstrap 4

Question

This post could sound like a duplicate but it isn't, please read first.

I want the main container ( <main role="main" class="container"> ) to be full-height between header and footer using Bootstrap 4. Here is my html code :

 // Initialize tooltip component $(function () { $('[data-toggle="tooltip"]').tooltip() }) // Initialize popover component $(function () { $('[data-toggle="popover"]').popover() })

 .container{ width: 100%; min-height: 100% !important; min-height:calc(100% - 110px); !important; margin: 0 auto -33px; border: solid blue; }

 <!DOCTYPE html> <title>My Example</title> <!-- Latest compiled and minified Bootstrap CSS --> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> </head> <body> <header> <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#" data-placement="right" data-animation="false" data-toggle="tooltip" title="Aller à Mes Summaries"> My Logo</a> </nav> </header> <!-- Begin page content --> <main role="main" class="container"> <div class="row mt-3" style="border: solid green"> <div class="col-sm-12 col-md-3" style="border: solid red; height: 200%;">col</div> <div class="col-sm-12 col-md-5">col</div> <div class="col-sm-12 col-md-4">col</div> </div> </main> <footer> <nav class="navbar navbar-toggleable-md navbar-inverse fixed-bottom bg-inverse" style="height: 10%;"> </nav> </footer> <!-- jQuery library --> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

I already googled, and I've applied the methods of the following posts:

And a lot more… But nothing work in my situation.

Please help!

Answer 1

Revisiting this question using the newer Bootstrap 4.4.x class ( no extra CSS needed )

<div class="d-flex flex-column overflow-hidden min-vh-100 vh-100">
   <header>
        <nav class="navbar navbar-expand-md navbar-dark bg-dark">
            ...
        </nav>
   </header>
   <main role="main" class="flex-grow-1 overflow-auto">
        <div class="container">
            <div class="row mt-3">
                <div class="col-sm-12 col-md-3">
                    Aside
                </div>
                <div class="col"> 
                    Main
                </div>
            </div>
        </div>
   </main>
   <footer class="container-fluid flex-grow-0 flex-shrink-1">
       ...
   </footer>
</div>

The result is a full-height layout header/nav, footer, and scrolling main content area in the middle. The footer is always at the bottom regardless of page height.

https://codeply.com/p/AvV1RvudwC

Answer 2

Flexbox is your friend here too.

However, before you read any further: you should not use the alpha version of Bootstrap 4 any more as beta 2 is out!

 .container { border: solid blue; } html { height: 100%; } body { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; margin-top: 56px; } footer { height: 10vh; }

 <header> <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#" data-placement="right" data-animation="false" data-toggle="tooltip" title="Aller à Mes Summaries">My Logo</a> </nav> </header> <!-- Begin page content --> <main role="main" class="container"> <div class="row mt-3" style="border: solid green"> <div class="col-sm-12 col-md-3" style="border: solid red; height: 200%;">col</div> <div class="col-sm-12 col-md-5">col</div> <div class="col-sm-12 col-md-4">col</div> </div> </main> <footer> <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse h-100"></nav> </footer> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

Basically this solution makes body a flex container with it's items stacked in columns. With that in place, flex: 1; on <main> stretches <main> to fill the available height and pushing <footer> into the bottom. With that .fixed-bottom is not needed any more.

Update: I've updated the markup above to conform Bootstrap 4 beta 2 . This is as follows:

 html { height: 100vh; } body { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; margin-top: 56px; } footer { height: 10vh; } .container { border: solid blue; }

 <header> <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#" data-placement="right" data-animation="false" data-toggle="tooltip" title="Aller à Mes Summaries">My Logo</a> </nav> </header> <!-- Begin page content --> <main role="main" class="container"> <div class="row mt-3" style="border: solid green"> <div class="col-sm-12 col-md-3" style="border: solid red; height: 200%;">col</div> <div class="col-sm-12 col-md-5">col</div> <div class="col-sm-12 col-md-4">col</div> </div> </main> <footer> <nav class="navbar navbar-toggleable-md navbar-inverse bg-dark h-100"></nav> </footer> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

To update your markup from alpha 6 to beta 2 you have to make the following changes: rename .navbar-expand-md to .navbar-expand-md , .navbar-inverse to .navbar-dark and .bg-inverse to .bg-dark .

Answer 3

Check the snippet . I fix your code and I change html . At this point main content should be fixed position and footer should be fixed height .

 // Initialize tooltip component $(function () { $('[data-toggle="tooltip"]').tooltip() }) // Initialize popover component $(function () { $('[data-toggle="popover"]').popover() })

 main{ height: calc(100% - 54px - 30px); /* Height should 100% - header height - footer height */ left: 0; overflow-x: hidden; /* If you need scrollbar */ overflow-y: auto;/* If you need scrollbar */ position: fixed; top: 54px; /* Header height */ width: 100%; z-index: 1; background-color: #f5f5f5; border: 5px solid #ff0000; }

 <!DOCTYPE html> <title>My Example</title> <!-- Latest compiled and minified Bootstrap CSS --> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> </head> <body> <header> <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#" data-placement="right" data-animation="false" data-toggle="tooltip" title="Aller à Mes Summaries"> My Logo</a> </nav> </header> <!-- Begin page content --> <main role="main"> <div class="container"> <div class="row mt-3" style="border: solid green"> <div class="col-sm-12 col-md-3" style="border: solid red; height: 200%;">col</div> <div class="col-sm-12 col-md-5">col</div> <div class="col-sm-12 col-md-4">col</div> </div> </div> </main> <footer> <nav class="navbar navbar-toggleable-md navbar-inverse fixed-bottom bg-inverse" style="height: 30px;"> </nav> </footer> <!-- jQuery library --> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

Note: This is not bulletproof solution. You need to try more for good solution. I just showing you how to overcome this type of issue. Now you on your own.

Can't make 100% div height between header and footer with Bootstrap 4

Question

3 answers

solution1
6 2020-04-10 15:12:55

solution2
3 ACCPTED 2017-12-03 22:27:01

solution3
1 2017-12-03 22:28:43

Can't make 100% div height between header and footer with Bootstrap 4

Question

3 answers

solution1 6 2020-04-10 15:12:55

solution2 3 ACCPTED 2017-12-03 22:27:01

solution3 1 2017-12-03 22:28:43

solution1
6 2020-04-10 15:12:55

solution2
3 ACCPTED 2017-12-03 22:27:01

solution3
1 2017-12-03 22:28:43