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

Tags:

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:

css - Stretch div between header and footer
css - How to create div to fill all space between header and footer div ...
html - how to make DIV height 100% between header and footer ...
html - Content with 100% between header and footer
css - Make a div fill the height of the remaining screen space - Stack ...

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

Please help!

533

asked Dec 03 '17 21:12

3 Answers

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

107

answered Oct 13 '22 09:10

Zim

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.

answered Oct 13 '22 09:10

dferenc

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.

answered Oct 13 '22 07:10

Rahul

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!

Donate Us With

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

Tags:

html

css

twitter-bootstrap

bootstrap-4

kabrice

People also ask

3 Answers

Zim

dferenc

Rahul

Recent Activity

Donate For Us

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

Tags:

html

css

twitter-bootstrap

bootstrap-4

kabrice

People also ask

3 Answers

Zim

dferenc

Rahul

Related questions

Recent Activity

Donate For Us