The footer should remain at the bottom of the page without being permanently fixed

Is there a way to keep the bootstrap footer at the bottom without fixing it in place?

In the code example below, the footer should always appear at the bottom. The white space after the footer should come before it. Using sticky-bottom achieves this, but when there is more content and the page is scrolled, the footer remains fixed and does not show up last.

How can we achieve the desired result?

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>VN Parcel</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">

</head>

<body>


  <nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light self-navbar">
    <a class="navbar-brand" href="'.$website_address.'"><img src="https://ui-avatars.com/api/?name=VN&rounded=true&format=svg" alt="'.$title.'" title="'.$title.'" width="30" height="30" loading="lazy" />&nbsp;'.$title.'</a>

    <ul class="navbar-nav self-first-ul">
      '.$website_slogan.'
    </ul>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">

      <ul class="navbar-nav ml-auto self-second-ul">
        <li class="nav-item"><a class="nav-link" target="_blank" href="https://wa.me/91'.$website_wamobile.'"><i class="fab fa-whatsapp"></i> '.$website_wamobile.'</a></li>
        <li class="nav-item"><a class="nav-link" href="mailto:'.$website_email.'"><i class="far fa-envelope"></i> '.$website_email.'</a></li>
        <li class="nav-item"><a class="nav-link" href="tel:'.$website_mobile.'"><i class="fas fa-mobile-alt"></i> '.$website_mobile.'</a></li>
      </ul>
    </div>
  </nav>




  <div class="container p-3 bg-white rounded">


    <div class="row">
      <label for="Number">Track your parcel here <i class="far fa-hand-point-down far-blink"></i></label>
      <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Search" aria-label="Number" aria-describedby="basic-addon2" id="number" name="srch_num">
        <div class="input-group-append">
          <input type="submit" class="btn btn-success" id="submit-addon2" value="Search" />
        </div>
      </div>
    </div>


  </div>





  <footer class="footer">
    <nav class="navbar bottom navbar-expand-lg navbar-light bg-light self-navbar">
      <a class="navbar-brand" href="'.$website_address.'"><img src="https://ui-avatars.com/api/?name=VN&rounded=true&format=svg" alt="'.$title.'" title="'.$title.'" width="30" height="30" loading="lazy" />&nbsp;'.$title.'</a>

      <ul class="navbar-nav self-first-ul">
        '.$website_slogan.'
      </ul>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <ul class="navbar-nav ml-auto self-second-ul">
          <li class="nav-item"><a class="nav-link" target="_blank" href="https://wa.me/91'.$website_wamobile.'"><i class="fab fa-whatsapp"></i> '.$website_wamobile.'</a></li>
          <li class="nav-item"><a class="nav-link" href="mailto:'.$website_email'"><i class="far fa-envelope"></i> '.$website_email.'</a></li>
          <li class="nav-item"><a class="nav-link" href="tel:'.$website_mobile'"><i class="fas fa-mobile-alt"></i> '.$website_mobile'</a></li>
        </ul>
      </div>
    </nav>
  </footer>

</body>

</html>

javascriptcsstwitter-bootstrapbootstrap-4footer

Answer №1

The problem you are facing is that your footer is positioned at the bottom of your webpage, but your content does not fill up the entire page

To fix this issue, you can set a minimum height for your body using the following CSS code snippet

body {
  min-height: 100vh;
  position: relative;
}
.footer{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0
}

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

Using JavaScript to redirect browser with a specific string

My goal is to redirect all users who visit a specific URL to another page. While this redirection works effectively, I now need to implement it with a tracking URL. The issue arises when Javascript automatically adds a "/" in front of the tracking string ...

javascriptjqueryhttp-redirect

Troubleshooting AngularJS application by Manipulating List Items

Having trouble debugging Angular lately. It feels like things are breaking and fixing themselves magically. For instance, I had an ajax call to delete a "site" which was working fine until I decided to add some code to remove it from the list as well. Now, ...

javascriptangularjs

What is the best way to update an array within an object using Redux?

I am currently working on a code for redux that involves an array. const initialState = [{ id: '1', title: '', description: '' }]; My goal is to update the array to contain two objects like this: [{ id: '1', title: ...

javascriptreactjsreact-redux

Tips for adjusting a pre-filled form?

When a form is rendered by onClick from a component, it loads with values. I want to be able to edit these current values and then perform an update operation. Here is the link to the sandbox: https://codesandbox.io/s/material-demo-forked-e9fju?file=/demo ...

javascriptreactjsmaterial-ui

Tips for linking weight scale device to a website

I recently developed a web application that calculates the weight of products. The application was created using PHP, JavaScript, and AJAX, running on a XAMPP server. Now my client is requesting for me to integrate a weight scale machine into the applica ...

javascriptphpajax

Can someone share with me the best practices for implementing @HostListener within a method in my Angular 16 project?

Currently, I've been involved in developing a Single Page Application using Angular 16, TypeScript, and The Movie Database (TMDB). My task at hand is to implement the "infinite scroll" functionality on a particular component. To achieve this, I have ...

javascriptangulartypescript

What is the best way to retrieve text that is viewable to the user when there is a text overflow situation

When using ellipsis in a text input to indicate overflow, is there a way to determine what text is visible to the user versus hidden behind the ellipsis? Thank you for any help! https://i.stack.imgur.com/8iLBQ.png In my scenario, I need to display a list ...

htmljquerycssweb

String casting for large JavaScript integers may require rounding to function properly

When trying to pass a large integer to a function from an onclick event in HTML, I always encounter issues with rounding. Despite using bigInt libraries, I still struggle to pass the full number accurately and would prefer a simple string casting method. ...

javascripthtmlbigint

What is the best way to retrieve user interaction data in Discord.js v13?

Is there a way to retrieve the activities from interaction.options? Whenever I try using interaction.options.getUser, I encounter this error message: cannot read properties of undefined (reading 'activities') Below is the snippet of my code: con ...

javascriptnode.jsdiscorddiscord.js

Displaying a JavaScript array containing multiple arrays

I have a collection of arrays, each containing a set of list items, which I am displaying using console.log(jobsList);. The output looks like this: The variable jobsList is generated by adding arrays created inside a for loop like this: for (var i=0; i ...

javascriptarrayssorting

An item was shown on the HTML page

Having some trouble displaying the graph generated by my R function on the opencpu server. Instead of the desired plot, all I see is [object Object] in the HTML page. Below is the snippet of code from my AngularJS controller: var req = ocpu.rpc("plotGraph ...

javascriptjqueryangularjsropencpu

What is the reason the text does not have a border around it?

The border is supposed to be around the text, but it isn't showing up. Where did I go wrong? Could it be that I need to set a position? html { width: 100%; height: 100%; margin: 0; padding: 0; } body { width: 100%; height: 100%; marg ...

htmlcss

Dynamic HTML text colors that change rapidly

I have an interesting question to ask... Would it be possible to create text that switches between two colors every second? For example, could the text flash back and forth between red and grey? I don't mean changing the background color, I mean act ...

javascripthtmlfontscolors

Is there a way for me to show "No data" when the json response in vue js is empty?

Is it possible to display a message like "No search results" when there is no data available? I am new to this and only have basic understanding. Can someone guide me on how to achieve this? Example of my JSON data when it's empty: { "status": true ...

javascriptjqueryvue.jsvue-component

React is unable to identify the `InputProps` prop when applied to a DOM element

https://i.sstatic.net/7fZmn.png Caution: React is not able to identify the InputProps property on a DOM element. If you intend for it to be displayed in the DOM as a custom attribute, spell it in lowercase as inputprops. If you accidentally passed it from ...

javascriptreactjsmaterial-ui

An error was encountered in customizing CKEditor5 in Vue: compilation unsuccessful

I tried to integrate a custom CKEditor5 into my Vue application, but encountered a failed to compile error. I generated the custom build using the online tool provided by CKEditor. Subsequently, I placed the files in a new folder called ckeditor within th ...

javascriptvue.jsckeditor5

Animating transitions on a dynamic Bootstrap navbar using jQuery

I have the code attached here, and I successfully changed the color of the navbar and logo when scrolling down. However, I am looking to add a transition effect when this change occurs. I experimented with various transition options in CSS, but unfortunat ...

javascripthtmljquerycssbootstrap-4

Convert specific form inputs into an array

I have a form that includes various inputs, but the ones I am focusing on are labeled attributes[] and options[$index][]. Here is an example of the data found in my attributes[] input: Array ( [0] => Size [1] => Color [2] => Material ) Not ...

javascriptjquery

Fastify Schema Failing to Validate Incoming Requests

Currently, our backend setup involves using Node.js and the Fastify framework. We have implemented a schema in satisfy to validate user input. Below is the schema defined in schema.ts: export const profileSchema = { type: 'object', properti ...

javascriptnode.jstypescriptschemafastify

Customizing a unique dropdown navigation experience

I have very limited experience with using jQuery and CSS. I recently came across the DropIt jQuery plugin files (accessible at ) and decided to integrate it into my Ruby on Rails project. Unfortunately, I am struggling with implementing the "Hover Me" exa ...

jquerycss