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

Slower CSS rendering as Javascript finishes its tasks

I am currently dealing with a jQuery plugin that is quite large and complex, but I will not be sharing it here to keep things simple. The issue I am facing is relatively straightforward, so I will focus on the essential code snippets: There is a click eve ...

javascriptjquerycssclickpseudo-element

Send the form via ajax

I am in the process of creating a unique application for my university, which is essentially a social network. One key feature I need to implement is the ability for users to add comments, which involves inserting a row into a specific database. To achieve ...

javascriptjqueryhtmlajaxforms

Automate web page interactions using Python Selenium to duplicate a class

Is there a method to duplicate a class? view image description here Upon examining the data-sitekey, I aim to replicate everything following it, namely 6Ld_LMAUAAAAAOIqLSy5XY9-DUKLkAgiDpqtTJ9b. Is this feasible? ...

pythonhtmlseleniumautomation

The JQuery chosen dropdown experiences a visual issue when placed inside a scrollbar, appearing to be "cut

Good day, I've been using the jQuery "chosen" plugin for a dropdown menu, but I encountered an issue with it being located in a scrollable area. The problem is that the dropdown items are getting cut off by the outer div element. I have provided a si ...

javascriptjqueryhtmlcss

Unable to successfully import an external HTML file that contains a script tag

I am currently experiencing an issue with my index.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8> <title>MyApp</title> <link rel="import" href="./common.html"> </head> <body> ...

javascripthtml

Retrieve the text input from the text field and display it as

Is there a way to display what users enter in a textfield when their accounts are not "Activated"? Here's an example: if(active == NULL);{ //I've attempted the following methods. //In this scenario, 'username' is the name of ...

javascriptphphtml

Personalize or delete the spacing within an ion row

Currently, I am delving into the world of Ionic app development. Although I have grasped the concept of the Grid layout, I find myself hitting a roadblock when it comes to adjusting or removing spaces between rows 2 and 3 in my app interface, as illustrate ...

htmlcssangularionic-frameworkionic2

Resolving formatting challenges in R markdown with Blastula

Dealing with formatting problems while trying to include an R markdown file in an email body. As a CSS novice, I'm struggling to find a solution and it's becoming quite frustrating. The table has the following CSS styling: <!DOCTYPE html ...

cssremailmarkdownblastula

Learn how to dynamically add a class to an element when hovering, and ensure that the class remains even after the mouse has

I'm facing difficulty with this task - when hovering over elements, an active class should be added to them. However, when moving the mouse to another section, the active class should remain on the last element hovered. Additionally, the first block s ...

javascriptjquerycss

Generating PDFs from websites using code

Currently, I have my resume available online as an HTML page at www.mysite.com/resume.html. Whenever I need a PDF version of it, I rely on Google Chrome's print dialog to save it as a PDF using my print CSS stylesheet. However, I am looking for a way ...

cssgoogle-chromepdfprintingresume

Clearing selections from a multiple-choice input field

I am seeking to implement a delete feature in a multi-select element similar to the functionality seen here on stackoverflow when selecting multiple tags for a question. Once an item is selected, I would like to display a close icon next to it so that user ...

javascriptjquerycssangularjsmulti-select

Looking for assistance with CSS styling

I've been attempting to align two custom fields on a checkout form next to each other, but I'm running into an issue where the fields below are overlapping. I've experimented with using clear: both/left/right; to address this problem, but it ...

css

Generate HTML table with CSS dynamically applied through jQuery

After performing some calculations and applying CSS rules using the .css() function in jQuery to color the background of a table, I am facing an issue when trying to print the page. The printed page appears in black and white without retaining any styling ...

javascriptjqueryhtmlcssdatatables

PHP function that allows toggling only the first item in an accordion

In my function.php file in WordPress, I have the following code that is called using a shortcode on certain pages. It loops through and displays FAQs stored with each post. However, I am facing an issue where only the first accordion item can be toggled, ...

phphtmlcsswordpress

Moving pictures using css3 transitions

Trying to create a straightforward image slider. Below is the provided JavaScript code: $(document).ready(function() { $('#slide1_images').on('click', 'img', function(){ $("#slide1_images").css("transform","translateX ...

javascriptjquerycss

The CSS for the UI Grid is malfunctioning

I have been working on creating a grid using UI Grid (recent version of ngGrid) within my current project. However, I am facing some issues with the display. The icons like angle down and row selected icon are not showing up correctly when I include the CS ...

cssangularjstwitter-bootstrapng-gridangular-ui-grid

Guide to swapping images on button click in HTML with dynamically changing image URLs retrieved from the server

I am a beginner in client-side scripting and new to Stack Overflow. I am looking for guidance on how to change an image within a div element upon clicking a button or anchor tag. Here is the code snippet I have written to achieve this: $scope.captchaCha ...

javascriptjqueryhtml

Tips for effectively displaying HTML data from a database on a web browser

Storing html data in a database is a common practice for many web developers. The html data generated by a wysiwyg editor is typically simple and straightforward. Prior to storing the html data in the database, it is essential to run it through HTMLPurif ...

phphtmlsecurityxsshtmlspecialchars

Refreshing a specific area on a webpage through the use of Ajax technology

I need to update a specific part of my webpage when a user clicks on the 'clear' button. I currently have some code that I borrowed from another answer I found on this site: $('.clear').click(function () { $.ajax({ url: "", ...

jqueryhtmlajaxrefresh

How tall can an image be to load successfully on an iPad website?

Similar Query: Max image width in Mobile Safari? Dealing with unwanted downscaling on panoramas What is the maximum height an image can be loaded at on a website when viewed on an iPad? I've tried loading an image (a sprite) with a height exceeding ...

cssimageipad