How to keep the footer of a webpage fixed at the bottom using CSS

I am facing an issue with my footer. I want it to always stay at the bottom of the page, but sometimes it moves up if there is a large element above it. Can anyone suggest a solution to ensure that the footer always remains at the bottom?

Below is the CSS code I currently have:

.footer {
position:absolute;
bottom:0;
width:100%;
background-color:#151211;
line-height: 16px;
padding: 0px 0px 20px 0px;
}
.footer .nav {
    float:left;
}
    .footer li {
        display:inline;
    }
    .footer li:before{
        color:#262320;
        content:" | ";
    }
    .footer li:first-child:before {
        content:"";
    }
.footer a:hover {
    color:#ffcc66;
}
.footer .nav a.login {
    background: url("../img/icon-lock.png") no-repeat 11px 5px #5c5a58;
    background-color: rgba(255,255,255,0.25);
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #262320;
    font-size: 10px;
    font-weight: bold;
    padding: 7px 9px 8px 32px;
    text-transform: uppercase;
}
.footer .nav a.login:hover {
    background-color: #939190;
    background-color: rgba(255,255,255,0.5);
}   
.copyright {
    color:#fff;
    font-size:16px;
    padding-top: 2px;
    text-align:right;
}
    .copyright span {
        color:#262320;
    }

If necessary, below is the HTML code I am using:

<div class="footer">
        <div class="liner">
            <div class="nav">
                <ul>
                    <li><a href="http://removed/ui/faces/login.xhtml" class="login">Client Login</a></li>
                    <li><a href="contactus.php" class="">Contact</a></li>
                    <li><a href="termsofuse.php" class="">Terms of Service</a></li>
                    <li><a href="privacy.php" class="">Privacy Policy</a></li>
                    <li><div class="fb-like" data-href="https://www.facebook.com/pages/removed/412357755542469" data-width="50" data-height="50" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="false" data-send="true" style="top: 10px;"></div></li>
                    <li><a href="https://twitter.com/removed" class="twitter-follow-button" data-show-count="false">Follow @removed</a>
                        <script>!function(d, s, id) {
                                var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
                                if (!d.getElementById(id)) {
                                    js = d.createElement(s);
                                    js.id = id;
                                    js.src = p + '://platform.twitter.com/widgets.js';
                                    fjs.parentNode.insertBefore(js, fjs);
                                }
                            }(document, 'script', 'twitter-wjs');</script></li>
                </ul>
            </div> <!-- .nav -->
            <p class="copyright">&copy; Copyright 2013  <span>|</span>removed</p>
        </div> <!-- .liner -->
    </div> <!-- .footer -->
htmlcss

Answer №1

If you're interested in sticky-footer solutions, consider checking out the responses to this question about creating a fixed footer at the bottom of a page: Fixed footer at bottom of page

Answer №2

Creating a sticky footer can be achieved by using absolute positioning. Simply place the footer within a container with a height set to 100% and position it at the bottom.

<div class="container">
    <div class="footer">Footer</div>
</div>

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    min-height: 100%;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    clear: both;
    color: white;
    background-color: blue;
    height: 25px;
}

Link to JSFiddle example

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

Eliminating the need for horizontal scrolling in the window causes a change in the height of an internal DIV element

Check out this snippet of code, a simplified version of a larger piece: html, body { margin: 0 !important; padding: 0 !important; /* overflow-x: hidden; /* uncomment this line */ } .app { position: relative; width: 100%; text-align: center !important; } ...

htmlcss

Having Issues with JSFiddle: Difficulty with executing a basic onclick event to display a string

Having trouble with an onclick event: Simply click the button to run a function that displays "Hello World" in a paragraph element with id="demo". <button onclick="myFunction()">Click me</button> <p id="demo"></p> <script> ...

javascripthtml

Differentiate input elements with custom styling

I'm experiencing an issue while trying to style a specific form field in Angular 7. The style doesn't seem to be applying properly. Below is my form structure: <ul> <li> <mat-form-field *ngIf="number"> <input ma ...

javascripthtmlcssangular

Steps for displaying a div when clicking a link in the navigation

Hello there, I'm from the Netherlands so please excuse any mistakes in my English. I will do my best to explain my question clearly.... Objective The goal is to have a navigation bar where each item, when clicked on, will display a div with content ...

htmlcssnavigationhover

Is it necessary to have the WAI-ARIA attribute aria-labelledby on a nested input element?

Do I need the attribute aria-labelledby on an <input> element nested within a <label> element that acts as a label for the <input>? For example: <label>This is an input field: <input type="text" /> </label> Or should ...

htmlwai-aria

What is the best way to split an array into smaller chunks?

My JavaScript program fetches this array via ajax every second, but the response time for each request is around 3 to 4 seconds. To address this delay, I attempted to split the array into chunks, however, encountered difficulties in completing the task: { ...

javascriptphphtmlajax

Ways to have a list component smoothly descend when a dropdown menu is activated

I have a situation where I have a list with two buttons, and each button triggers the same dropdown content in a sidebar component. The issue is that when I click on one button to open the dropdown, the second button does not move down to make space for it ...

javascripthtmlcssreactjs

"Struggling with the height of Bootstrap row not filling the entire space

I've tried everything but nothing seems to be working. Whether it's a simple height: 100% or experimenting with flex-grow: 1, none of it is doing the trick. I'm having issues with this site I'm currently working on: https://i.sstatic.n ...

htmlcssbootstrap-4sass

React powered interactive tables

I am in the process of creating a dynamic table using React, and here is the data structure I am working with: { numRows: 2, numCols: 3, cells: [ { id: 1, pos: { row: 1, col: 1 }, content: 'This is th ...

javascripthtmlreactjshtml-table

Using HTML and JavaScript to create a link that appears as a URL but actually directs to a JavaScript function

I am working on an HTML page and I am trying to create a link that appears to go to 'example.html' but actually goes to 'javascript:ajaxLoad(example.html);'. Here is what I have tried: <a href="example" onclick="javascipt:ajaxLoad( ...

javascripthtmlhttp-redirecthyperlink

How can I make the bottom of a background image appear first when scrolling?

My goal is to create a design similar to what can be seen on . I would like to achieve the effect where the bottom of the second image starts to appear as the first image gets cut away while scrolling down. Is there a way to achieve this using CSS? I am n ...

htmlcss

Unable to conceal a DIV using React

I'm attempting to hide a div programmatically upon clicking a button. I've written the following code, but it doesn't seem to be working (the Div remains visible): import React, {useState} from 'react'; import './Button.css&ap ...

cssreactjs

Correct the body when the bootstrap navbar collapses

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ...

htmlbootstrap-4navbar

Create tab title CSS design that coordinates with the tab content and features circular corners

I am currently working on creating html + css tabs with a unique design. The goal is to have the selected tab display the title connected to the tab content, with a "neck" rounding in like an arrow. After some progress, I have reached a point where the im ...

htmlcsspsd

Create a precise layout for a footer design

I recently revamped a footer using a new UI framework in an attempt to improve it. Despite my efforts to align it properly, I encountered issues with overlapping on the right side. I experimented with using <div> and applying styles to create a diffe ...

cssreactjsmaterial-uifooter

Guide on transforming a Java multiclass applet into an HTML file

Can someone help me with converting three Java classes saved as .java into an applet in HTML? I've been advised to convert it to a .jar file, but I'm not sure how to do that. Can anyone provide a step-by-step guide, preferably using NetBeans? ...

javahtmlobjectjarapplet

Having issues with my JavaScript timer - seeking assistance in troubleshooting the problem

Trying to set a timer for my little game, but facing some difficulties. The timer causes the balance to randomly increase from 0 to 13000 + some extra amount. <script> var coins = 0; var speed = 1; </script> <center> <h4> ...

javascripthtmlcss

Libraries using the bootstrap slider are revolutionizing the design of all other layouts

Currently, I am utilizing a slider sourced from the following location: https://codepen.io/kravisingh/pen/pLGzgo Here is the complete code for the page: paste.ofcode.org/Dx5NyPRunupjL6GRysUx9g However, upon adding these libraries, the layout of other s ...

jqueryhtmlcssbootstrap-4

The sluggish rendering speed of AngularJS is causing a delay in displaying the loader

Within my application, I have tabs that load a form in each tab with varying numbers of controls. Some tabs may contain a large number of controls while others may have fewer. My goal is to display a loader while the contents are being rendered into the HT ...

javascriptjqueryhtmlangularjs

A guide to positioning the content of an Angular tag within a span element

Can someone help me figure out how to properly align the PO number and Vendor information on my page? from PO Number: 344 Vendor: yu PO Number: 3445 Vendor: yu PO Number: 344 Vendor: yu to PO Number: 344 Vendor: yu PO Number: 3445 Vendor: yu PO Num ...

htmlcssangular