What's the best way to make sure the footer stays at the bottom of every page using CSS?

Here's the code I've been working on:

#footer {
   font-size: 10px;
   position:absolute;
   bottom:0;
   background:#ffffff;
}

I'm facing an issue with this code - can anyone offer some assistance?

UPDATE: To clarify the issue further: The footer is initially displayed at the bottom of the page when it loads. However, when the page's height exceeds the dimensions of the screen and a scroll bar appears, the footer remains in the same position. In other words, when the page's height is less than or equal to 100%, the footer is at the bottom. But when the height exceeds 100%, the footer is no longer at the bottom of the page, instead it remains at the bottom of the visible screen.

UPDATE: Despite trying various solutions, none of them have worked for me. I have decided to implement a sidebar instead.

htmlcssfootersticky-footer

Answer №1

If you're searching for an example of a sticky footer, check out this resource:

<div class="wrapper">
    Your content goes here
    <div class="push"></div>
</div>
<div class="footer">
    Your footer content here
</div>

CSS:

For a footer height of 142 pixels

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* negative bottom margin equal to footer height */
}
.footer, .push {
    height: 142px; /* .push should match the height of .footer */
}

/*

Sticky Footer developed by Ryan Fait
http://ryanfait.com/

*/

Answer №2

Give this a shot:

position: fixed;  
bottom: 0;

Answer №3

I had a burning question, ventured here in search of an answer, came up empty-handed, conducted some personal experiments, and finally cracked the code: 

#body {
  overflow-y: 0 auto;
}
#footer {
  position: fixed;
  top: 100vh; left: 0;
  margin-top: -100px;
  width: 100%; height: 100px;
  padding: 10px;
  color: #fff; background-color: rgba(0,0,0,0.6);
}
<div id="body">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div id="footer">
  <span>Some dummy Text</span>
</div>

Answer №4

Utilize the wrapper to encompass the entirety of your webpage. Embrace the power of negative/positive margin and height values to create a magical effect. 

.wrapper 
  {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px;
  }
.footer, .push 
  {
    height: 142px; /* .push should match the height of .footer */
  }

Answer №5

#footer { float:none; position:absolute; max-width:100%; min-height:50px; bottom:0; background-color:black;}

Answer №6

Avoid using position: absolute; for the footer as it may not adjust to page height changes. Opt for ryan fait's technique instead.

Personally, I prefer doing it this way;

.wrap {margin: auto; width: 980px;}
#content {min-height: 600px;}
#footer {height: 300px;}

<div class="wrap">
<div id="content">
</div>
</div>
<div id="footer">
<div class="wrap">
</div>
</div>

This method eliminates the need for dealing with negative margins and padding. Furthermore, it can easily comply with html5 standards by changing #footer to

<footer>
</footer>

Answer №7

I implemented the following code which resulted in my footer remaining fixed at the bottom of the page.

.footer2{
background-color:#606060 ;
color: #ffffff;
height: 30px;
bottom:0px;
position:fixed;
width:100%;
}

Answer №8

.footer-small, .push {
    background-color: #2C3E50;
    position: fixed;
    padding-top: 5px;
    clear:both;
    width: 100%;
    bottom:0px;
    z-index: 0;
}

I have found success with this approach as well.

Answer №9

I had a tough time finding a solution because none of the suggestions met my requirements:

  • If there is not enough content, I wanted it to stay at the bottom of the page, not in the middle.
  • If there is sufficient content, I didn't want it to stick and overlap the content, just stay at the bottom.
  • I wanted it to be hidden at first, only visible when the user scrolls down to see the footer.

Here's what ended up working for me:

html:

<body>
  <div class="page-wrapper">
    <h1>
      Page
    </h1>
  </div>
  <footer>
    Footer here
  </footer>
</body>

css:

body {
    height: 100%;
    width: 100%;
}

.page-wrapper {
  min-height:100vh; /*1vh = 1% of browser screen height*/
}

footer{
    position: relative;
    width: 100%;
    bottom: 0px;
}

Check it out here in action.

Answer №10

Why not use vanilla JavaScript instead of jQuery?

To adjust the wrapper div between the header and footer dynamically, you can calculate the height of the wrapper in JavaScript by subtracting the header and footer heights from the document height.


document.addEventListener('DOMContentLoaded', function() {
  var dh = document.documentElement.scrollHeight; //document height
  var hh = document.querySelector('header').clientHeight; //header height
  var fh = document.querySelector('footer').clientHeight; //footer height
  var wh = dh - hh - fh; //calculate the height for the wrapper
  document.getElementById('wrapper').style.minHeight = wh + 'px'; //set the height for the wrapper div
});

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

Comparing React's Styled-components, JSS, and Emotion: Which is

As a CTO, I am faced with the decision of choosing between three popular CSS-in-JS libraries: jss emotion styled-component. I will keep this question focused and avoid straying into subjective territory. If necessary, I will answer it myself by asking sp ...

cssreactjsstyled-componentsjssemotion

Unable to align text within a DIV using CSS

Recently, I started learning jQuery and building my own website. You can find my project on JSFIDDLE. The issue I'm facing is that when hovering over a new div, the text extends beyond the borders of that div instead of staying within it. I've sp ...

javascriptjqueryhtmlcss

The FAB button animation is causing delays in the transition process and is not functioning as originally anticipated

I am facing an issue with the FAB button and 3 Icons. The functionality is working fine on click for both show and hide actions, but the transition is too delayed. I want the icons to appear step by step, even though I have adjusted the transition delay se ...

htmlcssangularanimationfloating-action-button

ES6 import of CSS file results in string output instead of object

Too long; Didn't read I'm facing an issue where the css file I import into a typescript module resolves to a string instead of an object. Can someone help me understand why this is happening? For Instance // preview.ts import test from './ ...

javascriptcssangularwebpackimport

Saving information to a file using PHP

I am currently attempting to write text to a .txt file on my Mac when a button is clicked in the HTML. Here is what I have tried so far: HTML: <form style="margin-top:70px;" align=center action="write.php" method="post"> <input type=" ...

phphtml

Using CSS to set the display property to table-cell and converting it to a

I needed a SideMenu that would match the length of the content, but for some reason, using display:table-cell caused it to display:block in both Firefox and Chrome. What could be the reason behind this inconsistency? .back-branded { background: #900; ...

htmlcss

Tips for preventing overlap between two divs when utilizing position: absolute in CSS

In this CodePen link [https://codepen.io/anon/pen/qvQpaY], there is an issue with overlay between the two divs that have a class name of box-container. The black rectangle is being counted as the overall height by box-container because the red rectangle is ...

htmlcss

Steps for layering three images with distinct red, green, and blue components using HTML and CSS

Is it possible to overlay three versions of an image, each with red, green, and blue components, in order to recreate the original image using only HTML and CSS? I have tried this HTML setup: <div id="container"> <img class="color" id="red" ...

htmlcsscolors

How to create a customized "Sent" Page using PHPMailer

Recently, I've delved into using PHPMailer to handle my contact forms via email and after some trial and error, everything is running smoothly. The only minor inconvenience is that users are redirected after sending an email. For instance: If a user ...

phphtmlphpmailer

How can two unique links toggle the visibility of divs with two specific IDs?

I am developing an interactive questionnaire that functions like a 'create your own adventure' story. The questions are shown or hidden depending on the user's responses. Below is the HTML code: <!-- TIER 3 ============================== ...

javascriptjqueryhtmlcss

What is the best way to fetch images from a JSON object in a React application?

I have been trying to load images from an array of objects in React, but I keep encountering a "module not found" error. This issue has been frustrating me for the past couple of days. Can someone please help me troubleshoot this problem or provide some su ...

javascripthtmljsonajaxreactjs

Having trouble properly refreshing Bootstrap scrollspy that is spying on the <body> element

I've been looking at a post on Bootstrap's scrollspy component (found here). In my code, I initialize a new scrollspy to track the body element using: $("body").scrollspy({ offset: 25 }); As my code progresses, I make AJAX requests that add or ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Create an HTML div element that spans the full width of the

I'm facing an issue on my HTML page where a div containing users from a chat system database is not displaying correctly. The ul li tag within the parent div is not taking up the full width as expected. Here's how it should look: http://prntscr.c ...

htmlcss

detecting syntax errors in CSS with @media queries and keyframes

/*general CSS setting for all device types above hd*/ * { margin: 0; padding: 0; } #watchonly { display: none; } ...

csshtml

In IE8, displaying an element with jQuery does not cause the footer to be pushed down

I've tried various methods to solve this issue, but none have been successful so far. To better illustrate my problem, I have created a FIDDLE. When the button is clicked, a hidden element is displayed. However, it does not adjust the footer position ...

jqueryhtmlcssinternet-explorer-8

Transitioning between javascript functions

Having some issues with a switch case statement, also tried using if-else but no luck. In the HTML code: <select onBlur="functionCalc()" id="art"> <option value="hours" id="hours">Hours</option> <option value="minutes" id="mins">M ...

javascripthtml

Displaying HTML elements in a specific order using ng-repeat

Upon receiving the json message, my goal is to display it in HTML in a specific order. Within the json message, the position value indicates the desired order of elements, with 0 representing the first element in the array. At times, the json message may ...

javascripthtmljsonangularjs

The setTimeout function within the map function does not output any JSX element

I have been pondering the possibility of creating animated buttons using setTimeout on map elements. As I delve into learning React Transition group, I came up with this code snippet: function NavItemSub(props) { const array1 = props.array1; return ( ...

cssjsxsettimeoutmap-function

Implementing the 'active' class on a hyperlink in CodeIgniter: A step-by-step guide

My template is divided into three sections: header, footer, and content. The main menu links are located in the header section. I am trying to apply a CSS class 'active' to the hyperlink that is selected. I have written jQuery code to achieve thi ...

phpjquerycssajaxcodeigniter

I'm having trouble retrieving and rendering data in HTML using AngularJS and Spring

After fetching the data, I am unable to see it in the HTML code. The web browser console displays the JSON data but it is not visible in the HTML code. Here is my AngularJS code: $scope.refresh = function(){ fetchData(); }; $scope.fetchData = functio ...

htmlangularjsspringfrontend