What is the best way to position the footer at the bottom of the page without obstructing any content?

I am currently working on a project that utilizes Bootstrap, and I am facing an issue with positioning the footer. Ideally, I want the footer to stay fixed at the bottom of the screen when there is not enough content to fill the page. However, when the content exceeds the viewport height and scrolling is required, I want the footer to appear just after the content without overlapping it.

Essentially, I am looking for the footer to exhibit standard behavior - fixed at the bottom when the page is short and positioned after the content during scrolling.

At present, my code has the footer fixed at the bottom of the screen, causing it to cover the content near the end.

The current code snippet (PHP markup included) is as follows:

<footer class="container-fluid bg-black mt-5 fixed-bottom">
    <div class="row align-items-center">
        <div class="col-md-3">
            <p class="text-center mb-0">
                <a href="#" class="text-decoration-none">
                    <i class="bi bi-twitter fs-4 p-2 twitter_white"></i>
                </a>
            </p>
        </div>
        <div class="col-md-3">
            <p class="text-center align-bottom mb-0" style="color: white">
                <i class="bi bi-telephone-fill pe-2" style="color: white"></i>
                XXX XXX XXX
            </p>
        </div>
        <div class="col-md-3">
            <p class="text-center align-bottom mb-0" style="color: white">
                <i class="bi bi-envelope pe-2" style="color: white"></i>
                <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ceabb6afa3bea2ab8ea9a3afa7a2e0ada1a3">[email protected]</a>
            </p>
        </div>
        <div class="col-md-3 text-center">
            <a class="dropdown-toggle white_links" href="#" role="button" data-bs-toggle="dropdown">
                <?php if ($_SESSION['lang'] == "es") echo '<span id="es_flag" class="fi fi-es flag_icon_rounded"></span>';
                else if ($_SESSION['lang'] == "en") echo '<span id="en_flag" class="fi fi-gb flag_icon_rounded"></span>';
                else echo '<span id="cat_flag" class="fi fi-es-ct flag_icon_rounded">'; ?>
            </a>
            <ul class="dropdown-menu">
                <li><a href="/index.php?action=change_language&lang=cat"><span id="cat_flag" class="fi fi-es-ct flag_icon_rounded"></span><label class="label_flags black_links" for="cat_flag">Català</label></a></li>
                <li><a href="/index.php?action=change_language&lang=es"><span id="es_flag" class="fi fi-es flag_icon_rounded"></span><label class="label_flags black_links" for="es_flag">Español</label></a></li>
                <li><a href="/index.php?action=change_language&lang=en"><span id="en_flag" class="fi fi-gb flag_icon_rounded"></span><label class="label_flags black_links" for="en_flag">English</label></a></li>
            </ul>
        </div>
    </div>
    <div class="row align-items-center">
        <hr class="m-0 p-0" style="color: white">
        <div class="col-md text-center">
            <p class="pb-2 pt-2 m-0" style="color: white">
                © 2023 <?php echo $GLOBALS['translation']['association']." " ?>
            </p>
        </div>
    </div>
</footer>

Answer №1

When scrolling, the footer does not move because using the class .fixed-bottom applies position: fixed;, taking it out of the regular document flow. Learn more about how position: fixed works.

Below is an example demonstrating the desired behavior. The first snippet shows no scroll, the second includes a vertical scrollbar. The third snippet contrasts flex grow with auto margin on the footer.

Note that for it to function as intended, set html and body to height: 100% (or 100vh) using the class h-100.

<html lang="en" class="h-100">

<head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9cfef3f3e8efe8eefdecdca9b2afb2acb1fdf0ecf4fdad">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>

<body class="d-flex flex-column h-100">
  <main>
    <div class="container">
      <h1 class="mt-5">Sticky footer</h1>
    </div>
  </main>
  <footer class="footer mt-auto py-3 bg-light">
    <div class="container">
      <span class="text-muted">Place sticky footer content here.</span>
    </div>
  </footer>
</body>

</html>

To observe the footer moving down with the content, insert

<div style="height: 1000px;"></div>
inside <main> (without any other changes):

<html lang="en" class="h-100">

<head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b3934342f282f293a2b1b6e7568756b763a372b333a6a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>

<body class="d-flex flex-column h-100">
  <main>
    <div class="container">
      <h1 class="mt-5">Sticky footer except when scrolling</h1>
      <div style="height: 1000px;"></div>
    </div>
  </main>
  <footer class="footer mt-auto py-3 bg-light">
    <div class="container">
      <span class="text-muted">Place sticky footer content here.</span>
    </div>
  </footer>
</body>

</html>

An illustration showcasing the use of flex-grow-1 on <main> compared to applying mt-auto on <footer>:

<html lang="en" class="h-100">

<head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98faf7f7ecebeceaf9e8d8adb6abb6a8b5f9f4e8f0f9a9">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>

<body class="d-flex flex-column h-100">
  <main class="flex-grow-1">
    <div class="container">
      <h1 class="mt-5">Sticky footer using Flex grow.</h1>
    </div>
  </main>
  <footer class="footer py-3 bg-light">
    <div class="container">
      <span class="text-muted">Place sticky footer content here.</span>
    </div>
  </footer>
</body>

</html>

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

Edit: "Submit a binary file with just JavaScript"

I am currently developing a Chrome application that utilizes the HTML5 Filesystem API to enable users to import and synchronize files. A challenge I'm facing is when attempting to sync image files, as they appear to become corrupted during the upload ...

Navigating with hashtags in Angular2 and anchors does not change the page position

I recently came across a helpful post that showed me how to append a fragment to the URL. Angular2 Routing with Hashtag to page anchor Although the fragment is successfully added, I'm encountering an issue where the page does not scroll to the speci ...

Getting the text from a Selenium element can become tricky when dealing with product discounts that alter the element

(Programming) I am working on selecting random products from a website, some with discounts and some without. For instance: How do I retrieve product 748 (without discount)? or How do I retrieve product 419 (with discount)? When the product ha ...

increasing the size of a particular text box above the rest

Just starting out with bootstrap and trying to figure out how to make one text box larger than the others. See my code below: <div class="row"> <div class="col-md-2"> <mat-form-field > <input matInput pla ...

How to implement multiple conditions with ng-if in HTML

I need to implement a button that is visible only for specific index numbers: <tbody data-ng-repeat="(wholesalerIndex, wholesaler) in wholesalers"> <tr> <td> <but ...

Send a user to a different page following a page redirection

I'm attempting to redirect a page after a previous redirect, each one at a specific time interval. For example, after 5 seconds I want to redirect to one page, then after another 5 seconds to a different page. I'm not sure if this is possible. T ...

Show buttons in varying styles aligned next to each other

Here is the code snippet I'm currently working with: <fieldset class=last> <button>Refresh</button> <button> Clear</button> </fieldset> <form method="POST" action="*******"> <button> Down ...

Angular and Bootstrap do not support margin styles

While working with Angular 5 and Bootstrap, I have encountered an issue with using inline styles for margin. The template I am using is as follows: @Component({ selector: "dynamic-container-component", template: ` <div styl ...

Using inline styles can cause Content Security Policy (CSP) violations in applications

I have been diligently working on an application for quite some time using create-react-app. Recently, I decided to update to the latest version of React only to find out that a new Content Security Policy (CSP) has been implemented. To my dismay, upon tr ...

How can I modify the font size of h1 and h2 elements in CSS?

I am currently working with a WordPress twenty eleven theme and I am trying to adjust the size of my headings. Specifically, when I enclose my headings in h1 and h2 tags like so: <h1>My h1 heading </h1> <h2> My h2 heading </h2> The ...

Tips for creating unique Styles for H1, H2, and H3 with MaterialCSS by utilizing createTheme

In my application built with NextJS and styled with MaterialCSS, I have created two themes: a dark theme and a light theme using the following code: import { createTheme } from '@mui/material/styles'; export const darkTheme = createTheme({ pal ...

Positioning an element in the center of another using JQuery

Greetings! I am currently working with some elements that look like this: <div id="one">content</div> <div id="two">content</div> These elements are followed by another set of elements (without any parent, placed directly after th ...

Removing items from a list in a Vue.js application

I've encountered an issue with my code. I'm attempting to remove a "joke" from a list, but it consistently removes the joke that was inputted before the one I'm actually trying to delete. I'm struggling to identify what mistake I might ...

Embedding CSS stylesheets in a Django template

I'm currently working on a large Django website and in the process of adding the HTML templates. Here is the file tree for the main part: C:. +---forums | | admin.py etc | | | +---migrations | | | ... | | | +---templa ...

How can I ensure that all the text is always in lowercase in my Angular project?

Is there a way to ensure that when a user enters text into an input field to search for a chip, the text is always converted to lowercase before being processed? Currently, it seems possible for a user to create multiple chips with variations in capitaliza ...

Shrink Table Column Size with Bootstrap and Stylus to Optimize Space Usage

Currently experimenting with Bootstrap to ensure my table is responsive on a search list I am developing. However, I am facing an issue where two of my columns are taking up more space than necessary. In the image below, you can see that Date and Link colu ...

adverse offset and backdrop

To achieve the desired layout, I am trying to adjust the negative margin for the .text div so that it aligns on top of the .image div. <div class="wrap"> <div class="image"><img src="imgage.jpg" /></div> <div class="text ...

Webfont issues can lead to incorrect display on your website

Hello fellow Stackers! I could really use some help with a few IE-specific bugs I've encountered while working on a website for a friend. Check out the Website Here | View the Full CSS File The issue I'm facing is with the Google Webfont Ralewa ...

Creating a bold portion of a string

My task involves dynamically creating <p> elements within a div based on the contents of my codeArray, which can vary in size each time. Instead of hard-coding these elements, I have devised the following method: for(i=1;i<codeArray.length;i++) ...

Optimizing the appearance of an unordered horizontal list in the most effective manner

When attempting to make lists horizontal and hide default bullets, is it necessary to apply {display:inline} and {float:left} to both the <li> tags or would just one of these properties suffice? <ul> <li><a href="#">First item< ...