Struggling to achieve full height for div content between header and footer using Bootstrap 4?

This post may seem similar to others, but it's not. Please read carefully.

I am looking to make the main container (

<main role="main" class="container">
) full-height between the 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="Go to My 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 have searched extensively online and tried various methods suggested in different 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 ...

Despite trying many solutions, none of them seem to work for my specific situation.

If anyone has insights or suggestions on how to solve this issue, please share!

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Exploring this query with the latest Bootstrap 4.4.x class (no additional CSS required)

<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">
                    Side Bar
                </div>
                <div class="col"> 
                    Main Content
                </div>
            </div>
        </div>
   </main>
   <footer class="container-fluid flex-grow-0 flex-shrink-1">
       ...
   </footer>
</div>

The outcome is a complete-height layout comprising of a header/navigation, footer, and scrollable main content area in the middle. The footer remains at the bottom consistently regardless of the page's height.

Answer №2

Utilizing Flexbox can greatly enhance your layout design.

But before you proceed any further, it's important to note that the use of Bootstrap 4 alpha version is no longer recommended with the release of beta 2!

.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="Navigate to My 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"/>

This solution employs using Flexbox on the body element, allowing for a responsive layout with columns. By applying flex: 1; to the <main> element, it stretches to occupy available space and pushes the <footer> to the bottom without needing .fixed-bottom class.

Update: The code has been updated to align with Bootstrap 4 beta 2 standards:

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="Navigate to My 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 from Bootstrap 4 alpha 6 to beta 2, simply modify the classes as follows: change .navbar-expand-md to .navbar-expand-md, .navbar-inverse to .navbar-dark, and .bg-inverse to .bg-dark.

Answer №3

Review the snippet. I have adjusted your code and modified the html. The main content should now be in a fixed position while the footer has a fixed height.

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

    // Initializing popover component
    $(function () {
        $('[data-toggle="popover"]').popover()
    })
main{
  height: calc(100% - 54px - 30px); /* Adjusting height based on header and footer */
  left: 0;
  overflow-x: hidden; /* Adding scrollbar if needed */
  overflow-y: auto; /* Adding scrollbar if needed */
  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="Go to My Summaries">
            My Logo</a>


    </nav>
</header>

<!-- Main content starts here -->
<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>


<!-- Including 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>

Please note that this may not be a foolproof solution. Further testing may be required for optimal results. I have only provided guidance on how to address this issue. You are encouraged to explore and find the best approach for your particular case.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sending parameters to a PHP page using POST method when clicking on a dynamically generated <li> element

Here is my primary code: <div class="border_circular row"> <ul id="circulars_slider"> <?php while($row = mysql_fetch_array($circular)){ ?> <li> <p><?php echo $ro ...

javascriptphphtmlajaxtwitter-bootstrap

The code functions perfectly in the Adobe Dreamweaver Preview, but unfortunately, it is not compatible with Chrome

In the process of creating a website using Adobe Dreamweaver over the past few days, I encountered an issue with JavaScript that should activate upon scrolling. Interestingly, the script works perfectly fine when accessed through this link (), but fails t ...

javascripthtmladobedreamweaver

Challenges with jQuery Image Sliders

Currently, I am learning from a tutorial on creating a custom jQuery content slider and you can find the tutorial here. Everything is working smoothly in terms of creating the image slider. However, I am facing an issue where I want to have the 'Next ...

phpjavascriptjqueryhtmlcss

What is the method for obtaining a unique id that changes dynamically?

Having trouble accessing the dynamically generated ID in jQuery? It seems to work fine in JavaScript but not in jQuery. Here's an example of the issue: My jQuery code: var img = $("#MAP"+current_img_height); $("#map").css({'height': img.h ...

javascriptjquerycssfrontend

Exploring ways to programmatically click on a button located beneath a text using the Selenium library in Python

I am interested in creating a bot that can automatically like comments on a web page. Each comment has a like and dislike button attached to it. The xPath for the comment is: //*[@id="commentText-40538697"]/span The xPath for the like button is: //*[@id ...

pythonhtmlseleniumxpathweb-scraping

Having trouble with the vertical-align property in Google Chrome?

<html> <head> <style> table,td {border:1px solid black ;} table {width : 80% ;height:80%;} .top {vertical-align:top}; .center {vertical-align: middle}; .bottom {verti ...

html

Customizing CSS styles for designated sections

Within my code, I currently have the <p> style set to a font-size of 16px. However, I would like to increase the font-size to 20px for any <p> text within a "card" element, without needing to add a separate font-class to each <p> individu ...

htmlcsssass

Learn how to quickly resolve the issue in nodejs where the new image automatically replaces the old one when added

I have successfully created a file to upload images, however the image name appears as undefined.jpg in this project. I am using the Express file upload middleware. *admin.js var express = require("express"); const productHelpers = require("../helpers/pr ...

javascripthtmlcssnode.jsmongodb

The required widths of table columns are not being adhered to

I'm struggling to create an HTML email that will display correctly in Outlook. I initially used list items and the list-style-image Property, but that doesn't work in Outlook. Essentially, I have a table with 2 rows. The left row has an 11 pixel ...

htmlcssoutlook

:host ::ng-deep is not properly cascading styles to material checkbox

Struggling with changing the background color of a checkbox in a material multiselect. I've attempted both .mat-pseudo-checkbox-checked { background-color: #a9a9a9 !important; } and :host ::ng-deep .mat-pseudo-checkbox-checked { background-color: ...

javascriptcssangularangular-material

The JQuery onchange event functions as expected multiple times within JSFiddle, but seems to only fire once in the

A jQuery (1.11.1) script has been implemented on a business catalyst site cart page to show or hide a message based on the dropdown option selected by the user. The script functions correctly multiple times in jsfiddle at http://jsfiddle.net/NathanHill/462 ...

javascriptjquerycssbusiness-catalyst

The width of Highcharts increases proportionally to the growth of the chart's width

I want to create a highcharts graph where the width increases as data points increase. Currently, I have: I am using vuejs with highcharts, but it should work similarly with jquery or other frameworks. <div class="col-md-6" style= ...

javascriptcsshighcharts

Show data from a Mysql table column in a dropdown menu

I am trying to show the values from a MySQL table field in a select box. I attempted the code below but it only displays the specified field values in the echo function and not in the select box. I'm unsure where I made a mistake. $con = mysql_conne ...

phphtmlmysql

Utilizing the <style scoped> feature within my Angular template

When adding CSS styles in the specified htm file's templateUrl while loading a directive, I wonder if this is a bad idea. Will it be repeated every time the template is instantiated on the rendered page, or does Angular handle this differently? By usi ...

javascriptcssangularjs

Tips for updating the styleurls link dynamically by clicking a button and maintaining the changes

In the midst of developing an angular 2 project, I am currently working on integrating theme settings. Within my project, I have crafted three distinct component.scss files: red.component.scss, yellow.component.scss, and blue.component.scss. My goal is t ...

cssangularangular2-templatescss-lint

Is there a way to automatically close a created div by clicking anywhere outside of it?

I'm facing an issue with a dynamically created div that I want to close by clicking outside of it. However, when I try to achieve this functionality, the div closes immediately as soon as it is opened. closediv(); } function closediv() { d ...

javascripthtmlweb

Looking to position the Secondary Navigation Bar on squarespace at the bottom of the page, distinct from the primary Navigation Bar

When SALES PAGE becomes the secondary navigation option Instructions for positioning style to Bottom Center I am attempting to place it at the bottom of the navigation bar. Can you provide me with the necessary code or styles in squarespace? When I choose ...

csscustomizationmarginnavigationbarsquarespace

Show the time with AM/PM without displaying the year, month, or day

Currently, I am struggling to show the time as AM when my website loads using the format mm-dd-yyyy --:-- AM in a datetime-local input. The value attribute of datetime-local is causing some confusion for me. ...

javascripthtmlcss

Tips for breaking out of the traditional 12 column grid using Bootstrap 4 flexbox grid system

My excitement was palpable when I learned that Bootstrap 4 would be implementing flexbox for a grid system. I anticipated the fast and efficient element sizing capabilities that flexbox offers. However, it appears that Bootstrap 4 simply enhances the exist ...

twitter-bootstrapcssflexboxbootstrap-4

What steps do I need to take in order to include REMOVE and EDIT buttons in my table?

In the index.html file, there is a teacher table that is only displayed after clicking on the button Teachers: <div class="container"> <table class="teacherTable" border="1" width="100%" cellpadding=&qu ...

javascripthtmlbootstrap-4