CSS: The Ultimate Guide to Fixing Your Footer at the Bottom of Your Page

My goal is to anchor the Footer to the bottom of the page. I attempted to achieve this by using Absolute positioning in CSS, as suggested in similar discussions. However, the footer seems to be behaving like a Fixed element rather than Absolute.

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
}

header {
  background: rgba(150, 150, 150, 0.5);
  border-bottom: solid 1px;
  width: 100%;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

main {
  padding-top: 5px;
  padding-left: 100px;
  padding-right: 100px;
  padding-bottom: 60px;
}

footer {
  border-top: solid 1px;
  background: rgba(150, 150, 150, 0.5);
  width: 100%;
  height: 40px;
  padding-top: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8>
  <link rel="stylesheet" href="style.css">
  <title>Index</title>
</head>

<body>
  <header>
    This is header
  </header>

  <main>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
  </main>

  <footer>
    This is footer
  </footer>
</body>

</html>

Screen 1: https://i.stack.imgur.com/2hNZc.jpg Screen 2: https://i.stack.imgur.com/3mRPx.jpg

The issue I'm facing is that the footer is not sticking to the bottom edge of the page but rather remains fixed to the lower edge of the browser window. What could be causing this unexpected behavior?

htmlcss

Answer №1

Your body's height is currently set to 100%, meaning it will only be as tall as the viewport. To ensure your body fills the entire screen, consider using min-height for the body element and adding a relative position:

html {
  height: 100%;
}

body {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 100%;
  width: 100%;
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
}

header {
  background: rgba(150, 150, 150, 0.5);
  border-bottom: solid 1px;
  width: 100%;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

main {
  padding-top: 5px;
  padding-left: 100px;
  padding-right: 100px;
  padding-bottom: 60px;
}

footer {
  border-top: solid 1px;
  background: rgba(150, 150, 150, 0.5);
  width: 100%;
  height: 40px;
  padding-top: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <title>Index</title>
</head>

<body>
  <header>
    This is header
  </header>

  <main>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
  </main>

  <footer>
    This is footer
  </footer>
</body>

</html>

Answer №2

When it comes to laying out your webpage, using flexbox can be the perfect solution. Check out this resource on CSS Tricks for all the information you need: https://css-tricks.com/couple-takes-sticky-footer/

Here is an example of how you can implement flexbox in your HTML and CSS:

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS:

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}

Answer №3

Footer positioning can be simplified by removing the specification for position, bottom, and left. It is important to define the height (in %) of each section. Consider the following CSS code:

html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: "Times New Roman", Times, serif;
font-size: 20px;
}

header {
 height:10%;
 background: rgba(150,150,150,0.5);
 border-bottom: solid 1px;
 width: 100%;
 text-align: center;
 padding-top: 20px;
 padding-bottom: 20px;
}

main {
height:80%;
padding-top: 5px;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 60px;
}

footer {
height:10%;
border-top: solid 1px;
background: rgba(150,150,150,0.5);
width: 100%;
height: 40px;
padding-top: 10px;
text-align: center;   
}

The above CSS ensures that the footer remains at the bottom of the page regardless of screen size, zoom level, or content length.

Answer №4

The optimal approach I discovered is utilizing flex properties.

Make sure that the body/root or main container is set to display:flex. You can adjust its impact by using flex-direction:column based on your CSS requirements.

After setting this up, create a footer container like this-

<div id="footer">
   <span>my footer text </span>
<div>

Convert this footer container into a column flexbox as well with flex-grow:2, ensuring it occupies all available vertical space. Align the content to the end of the flex element so that it remains at the bottom.

#footer {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-grow: 2;
}

This setup ensures that if the content doesn't fill the entire height, the footer stays at the bottom. If the content exceeds the viewport height, it will scroll and remain at the end without creating extra space.

Putting it all together -

html {
  height:90% /* taking advantage of iframe behavior */
}

body {
  height:100%;
  display:flex;
  flex-direction: column;
}

#footer {
  display:flex;
  flex-direction:column;
  flex-grow:2;
  justify-content:flex-end;
}
<div>
  Hello World
</div>

<div id="footer">
  <span>my footer<span>
</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

Exploring the application of the PUT method specific to a card ID in vue.js

A dashboard on my interface showcases various cards containing data retrieved from the backend API and stored in an array called notes[]. When I click on a specific card, a pop-up named updatecard should appear based on its id. However, I am facing issues ...

javascripthtmlcssvue.jsaxios

Steps for resolving "TypeError: Unable to read properties of undefined (reading 'useSystemColorMode')"Ready to overcome this particular error message?

While working on a project with ChakraUI and React JS, I encountered an error at the start that read, "TypeError: Cannot read properties of undefined (reading 'useSystemColorMode')". I have not made any changes to the global theme in Chakra, j ...

javascriptcssreactjschakra-ui

Issues with jQuery .on() hover functionality in HTML5 select element not being resolved

I'm currently working on capturing the event triggered when the mouse hovers over a select box, regardless of whether it's collapsed or expanded. My approach involves using .on() in the following manner: $(document).on('hover', "select ...

javascriptjqueryhtml

Conceal a component when the succeeding one appears on a separate line

I'm looking for a solution to display an address on a webpage in two different formats based on the length. The first format should be: Street Number, PostalCode City If the address is too long to fit on one line, it should be displayed as: Street ...

csscss-float

Overlap and cover additional elements within a DIV

I am looking to create a versatile function that can effortlessly overlay various elements such as selects, textfields, inputs, divs, tables, and more with a partially transparent div matching their exact height and width. I have managed to obtain the pos ...

javascriptjquerycssjquery-pluginstwitter-bootstrap-3

What is the best approach to retain a user's selection for dark mode?

I have created a small website to showcase my work, but I'm struggling to figure out how to make the website remember a user's choice of dark mode. After searching on Stack Overflow, I came across suggestions like using cookies or localStorage. ...

javascripthtmlcss

Creating two horizontal flex containers with an input box that is responsive can be achieved by setting the display property

I need some assistance with a layout issue I am facing. Currently, I have two flex containers in a row - one set to flex-start and the other to flex-end. Both of these containers are within a wrapping div that is also set to flex. When the width of the wi ...

cssflexbox

Is there a way I can ensure the values are loaded when the page loads, rather than displaying NaN?

I've recently created a car rental calculator for a client, and it's almost complete. Everything is working smoothly, from the calculations to the conditions. However, I'm facing an issue where the price isn't calculated on page load. I ...

javascriptphphtmljquerynan

Sending data to another page by selecting a list item

Being new to web programming and JavaScript, I am facing a scenario where I have a list of requests displayed on one page and I need to pass the ID of the selected request to another page to display all the details of that particular request. I am strugg ...

javascriptphpjqueryhtml

Calculate the total number of blank input boxes within a specific row of the table

What is the method to count the number of input boxes without a value in a table row using jquery? For instance: <table id="table1"> <tr class="data" id="row5"> <td><input type="text" value="20%" /></td> <td><input ...

javascriptjqueryhtml

Tips for integrating a "datetime" picker in your AngularJS application

Currently working on an AngularJS application. The single page has a date input that needs to be added. Date Input <input type="date" ng-model="InputDate" /> Any suggestions on how to accomplish this task? ...

angularjshtmlinputtwitter-bootstrap-3datetimepicker

Transmitting Data to PHP Using JQuery/AJAX

I'm struggling with this issue. Here is the HTML code that I have: <input type="text" class="studno"><input type="button" value="Check" class="chstudno"> How can I send this data to PHP using JQuery/AJAX? Below is the code that I current ...

jqueryhtmlajax

Differences between addEventListener and jQuery's on method, as well as form.submit and jQuery's

I encountered a situation where callbacks registered using jQuery's on method were not being called when trying to trigger form submission with the HTML Form element object instead of jQuery. After some testing, I discovered that changing the code to ...

javascriptjqueryhtmldom-events

ReactStrap: Transparency issue with DropDown items on mobile devices

I've encountered an issue with my dropdown menu that works perfectly on desktop: https://i.sstatic.net/73Z0X.png However, on mobile devices, it appears to be transparent for some reason: https://i.sstatic.net/dhtOw.png Here is the code snippet ...

htmlcssreactjsbootstrap-4reactstrap

Opera's compatibility with jQuery's Append method allows developers to

I recently wrote a jQuery script that interacts with a JSON feed and dynamically creates HTML code which is then added to a designated div on my WordPress site. Surprisingly, the functionality works flawlessly in all browsers except for Opera - where not ...

javascriptjqueryhtmljson

Tips for creating a Vue component that triggers the select dropdown to open when the entire div or wrapper is clicked

I have a custom-designed select dropdown with unique symbols for the select arrow. To achieve this look, I've hidden the default select arrow/triangle and placed our symbol on top as an image file. <div class="select-wrapper"> < ...

javascripthtmlcssvue.js

Material Angular table fails to sort columns with object values

Currently, I am in the process of developing a web application using Angular Material. One of the challenges I have encountered is displaying a table with sorting functionality. While sorting works perfectly fine on all columns except one specific column. ...

javascripthtmlangulartypescriptangular-material

Using HTML within a Material-UI Accordion component

I am attempting to display HTML content within an Accordion component. import {Accordion, AccordionDetails, AccordionSummary, Typography} from '@material-ui/core'; import { Badge } from 'reactstrap'; ... const buildAccordion = (f, i) ...

htmlreactjsmaterial-uiaccordion

Identify when the user intends to open the link in a new window or tab

I am developing an AJAX application where all links on the page are JavaScript links (href="javascript:void(blahblah)"). Some of these links open small webpages in an iframe within a positioned div element that can be moved around. While this design looks ...

javascriptajaxhtmlcanvas

When hovering over the menu list, the background-color of the text area remains the same

I am facing an issue with my list menu. The hover effect changes the background color only in the box area, but not in the text area. I would like to figure out a way to make both areas change color on hover: Here is the code snippet: <div class="se ...

csslistmenubackgroundhover