CODEWITHSUNDEEP
htmlcssbootstrap-5
Geoffrey De Smet
Geoffrey De Smet

Reputation: 27312

Vertical align a footer to the bottom of the page (Bootstrap 5)

I am using a dark background footer. Because some pages don't have enough content to fill the entire browser's viewport, I am getting an ugly white band below it.

How do I get the footer to go to the bottom of the viewport on pages with little content? But on pages with more content than the viewport, the footer should only appear after scrolling down past that content.

I've tried fixed-bottom and sticky-bottom of Bootstrap 5, but these hide the content if there is more content or the browser viewport is smaller.

<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha256-IUOUHAPazai08QFs7W4MbzTlwEWFo7z/4zw8YmxEiko=" crossorigin="anonymous">
</head>
<body>
  
  <div class="container">
    <h1>Title</h1>
    <p>Content</p>
  </div>
  
  <footer class="bg-black text-white">
    <div class="container">
      <p>This should be at the bottom of the page</p>
      <p>This should be no white band below this</p>
    </div>
  </footer>
  
  
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha256-xLI5SjD6DkojxrMIVBNT4ghypv12Xtj7cOa0AgKd6wA=" crossorigin="anonymous"></script>
</body>
</html>

Upvotes: 6

Views: 5910

Answers (2)

Rok Benko
Rok Benko

Reputation: 22900

Use min-height.

See the snippet below.

body {
  min-height: 100vh;
}

.content {
  min-height: calc(100vh - 64px); /* 64px is the height of your footer */
}

footer p:last-child {
  margin-bottom: 0;
}
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha256-IUOUHAPazai08QFs7W4MbzTlwEWFo7z/4zw8YmxEiko=" crossorigin="anonymous">
</head>

<body>

  <div class="container content">
    <h1>Title</h1>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
  </div>

  <footer class="bg-black text-white">
    <div class="container">
      <p>This should be at the bottom of the page</p>
      <p>This should be no white band below this</p>
    </div>
  </footer>


  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha256-xLI5SjD6DkojxrMIVBNT4ghypv12Xtj7cOa0AgKd6wA=" crossorigin="anonymous"></script>
</body>

</html>

EDIT

const footerHeight = $("footer").height();
$(".container.content").css("min-height", "calc(100vh - " + footerHeight + "px)");
body {
  min-height: 100vh;
}

footer p:last-child {
  margin-bottom: 0;
}
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha256-IUOUHAPazai08QFs7W4MbzTlwEWFo7z/4zw8YmxEiko=" crossorigin="anonymous">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>

<body>

  <div class="container content">
    <h1>Title</h1>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
  </div>

  <footer class="bg-black text-white">
    <div class="container">
      <p>This should be at the bottom of the page</p>
      <p>This should be no white band below this</p>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha256-xLI5SjD6DkojxrMIVBNT4ghypv12Xtj7cOa0AgKd6wA=" crossorigin="anonymous"></script>
</body>

Upvotes: 2

Carol Skelly
Carol Skelly

Reputation: 362360

The easiest way is to use a flexbox layout. You can put the appropriate classes (d-flex flex-column vh-100) on the body, and then use mt-auto to force the footer to the bottom. Finally, place overflow-auto on the container so the rest of the page can scroll as needed.

<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha256-IUOUHAPazai08QFs7W4MbzTlwEWFo7z/4zw8YmxEiko=" crossorigin="anonymous">
</head>
<body class="d-flex flex-column vh-100">
 <div class="container overflow-auto">
  <h1>Title</h1>
  <p>Content</p>
 <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
  <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
  <p>Content</p>
  <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
  <p>Content</p>
  </div>
  <footer class="bg-black text-white mt-auto">
  <div class="container">
      <p>This should be at the bottom of the page</p>
      <p>This should be no white band below this</p>
  </div>
  </footer>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha256-xLI5SjD6DkojxrMIVBNT4ghypv12Xtj7cOa0AgKd6wA=" crossorigin="anonymous"></script>
</body>

</html>

<body class="d-flex flex-column vh-100">
 <div class="container overflow-auto">
      <h1>Title</h1>
      <p>Content</p>
  </div>
  <footer class="bg-black text-white mt-auto">
      <div class="container">
          <p>This should be at the bottom of the page</p>
          <p>This should be no white band below this</p>
      </div>
  </footer>
</body>

EDIT:

If you only want the footer to be visible after scrolling large content just change vh-100 to min-vh-100

https://codeply.com/p/273L716IHN

Upvotes: 6

Related Questions