Issue with footer not remaining at the bottom of the page

I created a simple footer using CSS and Bootstrap. It seems to be working fine on most pages, but I'm facing an issue where on pages with minimal content, the footer appears at the end of the content rather than the bottom of the page.

I've spent quite some time trying to troubleshoot this problem, but so far, I haven't been able to find a solution.

.footer {
        position: relative;
        bottom: 0;
        width: 100%;
        height: 150px;
        background:#dfdfdf;
        
    }
.body-tag {            
        height: 100%;
        background: #F6F6F6;
        color: #333333;
        margin-top: 5rem; 
        padding-bottom: 4rem;
    }
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="583a37372c2b2c2a3928186d7668766a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body class="body-tag">
    <div class="footer fixed-bottom">
    <div class="container">
        <footer class="py-3 my-4">
            <ul class="nav justify-content-center border-bottom pb-3 mb-3">
                <li class="nav-item"><a href="#" class="nav-link px-2 footer-text">Home</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 footer-text">Features</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 footer-text">Pricing</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 footer-text">FAQs</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 footer-text">About</a></li>
            </ul>
            <p class="text-center footer-text">&copy; name, Inc</p>
        </footer>
    </div>
</div>
</body>

htmlcsstwitter-bootstrap

Answer №1

To fix the footer issue, just eliminate the unnecessary margin and padding from the body, as well as the margin-bottom from the footer.

Based on your diagram, there should be no problem with the placement of the footer. If there is a position value set in the footer, remove it, and ensure that all elements have a single parent container.

.footer {
  width: 100%;
  background-color: cyan;
}

.body-tag {
  height: 100%;
  background: #F6F6F6;
  color: #333333;
}

/*Just Demo Purpose*/
nav{
  background-color: cyan;
  height: 60px;
}
main{
height:200vh;}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f0d00001b1c1b1b8e1f2f5a415f415d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<body class="body-tag">
  <nav class="">
    <h1 class="text-center">Navbar</h1>
  </nav>
  <main></main>
  <footer class="footer py-3 ">
    <ul class="nav justify-content-center border-bottom pb-3 mb-3">
      <li class="nav-item"><a href="#" class="nav-link px-2 footer-text">Home</a></li>
      <li class="nav-item"><a href="#" class="nav-link px-2 footer-text">Features</a></li>
      <li class="nav-item"><a href="#" class="nav-link px-2 footer-text">Pricing</a></li>
      <li class="nav-item"><a href="#" class="nav-link px-2 footer-text">FAQs</a></li>
      <li class="nav-item"><a href="#" class="nav-link px-2 footer-text">About</a></li>
    </ul>
    <p class="text-center footer-text">&copy; name, Inc</p>
  </footer>
</body>

Answer №2

To keep your footer always at the bottom of the page, use position: fixed;:

Check out this demonstration

* {
  margin: 0;
  padding: 0;
}

footer {
  position: fixed;
  bottom: 0;
}
  <footer>I am a fixed footer</footer>

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

Why am I experiencing varying outcomes between createShadowRoot and attachShadow methods?

Recently, I've encountered an issue related to shadow dom while working on a project. After referring to an older tutorial that uses createshadowroot, I realized that this method is now considered deprecated and should be replaced by attachshadow. Un ...

csswebshadow-dom

The inability of Chrome and Firefox browsers to open Windows folders directly from a hyperlink is a common

My link is directing to a Windows folder using its directory path. Surprisingly, it works perfectly fine in Internet Explorer but fails to work in Chrome and Firefox. How can I resolve this issue? The structure of my link looks like this: <a href="&bs ...

phphtmlgoogle-chromedirectory

What is the best combination of tools to use for web development: express with jade/ejs, along with html5, css

As I delve into learning node.js/express, a question arises about how jade/ejs, html, and css work in harmony. Allow me to share my understanding: The application logic is implemented in node.js/express A portion of this logic/variables is injected into ...

htmlcssnode.jsexpresspug

What is the best way to determine the quantity of identical items in the django templating language?

My goal is to create a table that organizes items by type, all retrieved from my database. Currently, I can display the items and their corresponding types without any issues in a table format. However, I want to avoid repeating the same type multiple time ...

htmldjangodjango-templates

Is it possible to modify the font color of a specific MenuItem in material-ui?

I've scoured every corner of the internet, but I'm still stumped by this question: How can I tweak the text color (not the background) for a selected or hovered MenuItem? I know the solution lies within useStyles, but my attempts thus far have be ...

javascriptcssreactjsmaterial-ui

Traversing JSON Data using Vanilla JavaScript to dynamically fill a specified amount of articles in an HTML page

Here is the code along with my explanation and questions: I'm utilizing myjson.com to create 12 'results'. These results represent 12 clients, each with different sets of data. For instance, Client 1: First Name - James, Address - 1234 Ma ...

javascripthtmlcssajaxapi

What is the best method for retrieving the latest three objects that have been created in the database?

I'm struggling to figure out how to display the latest 3 created objects on my website. I need to order the models by created date and then access the 1st, 2nd, and 3rd items in that ordered set. However, I'm not sure how to do this correctly. He ...

htmldjangodjango-viewsdjango-filter

Acquire the text within an anchor tag using JavaScript

Is it possible to invoke a search for all links on my Wordpress blog? I'm not sure if my idea is correct. Currently, I am using an Ajax call for another search on this site. How can I extract the text from a hyperlink HTML tag? For example: <a href ...

phpjavascripthtmlwordpress

Chrome tab freezes when scrolling with the mouse

Working on a particularly interesting bug, I've managed to replicate it using a fiddle. The issue arises when the middle mouse button is clicked over the div element containing text, causing the pointer to become stuck. Is this possibly a browser bug ...

javascripthtmlcssgoogle-chrome

Tips for hiding a div element until its visibility is toggled:- Set the display property of

Looking for some guidance on this jQuery code I'm working with to create a toggle menu. The goal is to have the menu hidden when the page loads, and then revealed when a button is clicked. However, currently the menu starts off being visible instead o ...

javascriptjqueryhtml

The Angular boilerplate and Twitter Bootstrap 3 make for a powerful combination in

I've been attempting to integrate Twitter Bootstrap 3 into this project found at https://github.com/ngbp/ngbp, but I haven't been able to find any information on how to do so. Could it be that: It's simply not possible It's not recomm ...

javascripthtmlangularjstwitter-bootstrap

Tips on how to display a gif image during the loading of ajax content using JavaScript

Currently, I am attempting to load a gif image while waiting for the AJAX data to be loaded and displayed. However, I am struggling with this task. I would appreciate any assistance on how to implement a loading gif in my code for the advanced search feat ...

phpjavascripthtmlcssajax

creating a picture within a frame

the code : function DrawFirstRow() { Position = 1; width = 84; height = 84; startX = 28; startY = 28; for (index = 0; index < canvasWidth; index += 28) { /// use += ctx.drawImage(tankImage, (Position ...

javascripthtmlcanvas

Website experiencing issues with image sizing

On my website, in the Current Books section, I have a row of images. To ensure that all the images are the same height, I initially set the height of the HTML book image to 378 using: <img alt="HTML & CSS" height= "378" src="html.jpg"> Using ...

jqueryhtmlcss

What could be causing the issue of my p tag not being centered within both of my content divs?

I'm struggling to center the paragraphs within the divs with classes .content1 and .content2. Can anyone help me figure out why? Check out the demo here Here is the code: .content1 p, .content2 p { text-align: center; background-color: rgba ...

css

CSS - Creating a stylish break line for link boxes

Struggling with creating a box that includes linked text and a line break. However, the issue arises when the line breaks, causing the box to also break. After trying multiple options, I still can't seem to find a solution. Check out my attempt her ...

htmlcssline-breaks

How come the h2::after element is positioned directly beneath the main h2 element, and with a margin-bottom?

I'm puzzled as to why the margin-bottom property in the main h2 element isn't affecting its "::after" element. Both are defined as block elements, so one margin should provide enough space between them. Even though the "h2::after" element has 0 m ...

htmlcss

Web browsers are displaying code rather than the page itself

I recently hosted a .Net application on my Local IIS Server. Unfortunately, I neglected to handle error cases in MVC, opting instead to utilize the IIS .NET Error for page redirection to a specific page. When errors occur, the ASP.Net error page shows up ...

htmlasp.netiiserror-handling

Eliminate the horizontal scrollbar generated by a certain div

I'm working on the following HTML structure: <div id="container"> <div id="content"></div> </div> The container div is set at a width of 1050px and has a shadow background that repeats vertically. The content div is 950px ...

htmlcssscrollbar

Can you explain the owlItem feature found in owl carousel?

Does anyone have an idea about this? .data("owlItem") How can I find this in jQuery or the console log? I don't think this is a data attribute. .data("owlItem") .data("owlItem") $("#slider_thumb").on("click", ".owl-item", function(e){ ...

jqueryhtmlowl-carousel