Having trouble with keeping the footer fixed on the bottom of the page

I'm currently working on resolving a bug with the footer. It seems to be staying in the middle of the page instead of at the bottom of the browser as it should. The issue occurs when there isn't enough content on the page, causing the footer to adjust its height to match that of the other divs. You can see an example of this problem on the following site:

I've attempted to address this by applying CSS commands such as overflow:auto; and height:auto; to the main div wrapper and footer, but without success. Any suggestions on how to resolve this issue would be greatly appreciated. Thank you.

htmlcssfooter

Answer №1

Hopefully, this choice will provide assistance to you DEMO Sticky Footer

<div class="page-wrap">

  <h1>Sticky Footer</h1>
  <h2>with Fixed Footer Height</h2>

  <button id="add">Add Content</button>  

</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>


* {
    margin: 0;
}
html, body {
    height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
    margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
    height: 142px; 
}
.site-footer {
  background: orange;
}

Answer №2

Make alterations to your footer and keep it fixed in position:

footer {
    background: none repeat scroll 0 center #fff;
    bottom: 0;
    display: block;
    margin: 0 auto;
    padding: 80px 0 0;
    position: fixed;/*fixed position*/
    width: 100%;
}

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

Could someone clarify why inline-block items appended with jQuery seem to lose their spacing?

Currently, I am working on a project that involves cloning objects and adding them to the same parent. However, when I animate these objects, my calculations are always slightly off. Upon further investigation, I discovered that inline-block items have tra ...

javascriptjqueryhtmlcss

Steps for updating the <option> selection in the third <select> menu when the second <select> menu changes, with the second menu being populated by altering the value of the first dropdown through jQuery AJAX

I'm facing a unique situation in my school management project and have been unable to find a solution online. Here's the issue: I have three <select> elements - the first one is for selecting a class, the second one is for selecting a secti ...

phpjqueryhtmlajaxselect

Tips for aligning an image in the center of a div

I'm facing a challenge that seems simple, but I just can't seem to crack it. Here's the HTML snippet in question: <div class="product"> <img src="product123.png" /> </div>` Accompanied by the following CSS: .product { ...

htmlcssmargin

Can the appearance of the Chrome browser be altered to resemble a printed page?

Simply put, I'm tackling a massive project right now. While my print.css is functioning perfectly, the task of constantly previewing the print page has become incredibly frustrating. What's more, it's impossible to inspect the page effectiv ...

htmlcssgoogle-chrome

What could be the reason for the ineffectiveness of grid-auto-columns?

I've been delving into the world of CSS Grid Layout and I'm facing a puzzling issue. Despite using both grid-auto-columns and grid-template-columns, I haven't seen any changes reflected. I've experimented with different values for grid ...

htmlcsscss-grid

What methods can be utilized to create a versatile ratings widget using LESS instead of traditional CSS?

Recently, I stumbled upon a versatile one-image rating widget created with SASS by the team at AirBnB. I am interested in replicating something similar using LESS. While I could manually write out the CSS, I prefer to generate it dynamically with LESS. My ...

htmlcssless

The Navbar design in Bootstrap is not scaling properly with the background image, making

I am currently in the process of developing a Bootstrap 5 webpage based on a provided design, but I am encountering some challenges. Here is the design I am working from: https://i.sstatic.net/MsFzq.jpg Here is my current progress: https://i.sstatic.ne ...

cssbootstrap-5

Does UTF-16 encompass ASCII characters? If so, what causes UTF-16 to be at odds with ASCII as stated in the HTML Standard?

The Wikipedia article on UTF-16 states, "...[UTF-16] is also the only web-encoding incompatible with ASCII." (at the end of the abstract.) This refers to the HTML Standard. Is this statement accurate? As a C# / .NET developer, I know that both .NET and .N ...

c#html.netasciiutf-16

Encase children within a view component in React Native

I've been working on the following code: renderActionButtons(actionButtons){ let actionButtonsContent = actionButtons.map((button, i) => { return <TouchableHighlight key={i} onPress={() => {this.updateConversation(button);}} style= ...

cssreactjsreact-nativeflexboxreact-native-flexbox

I am attempting to retrieve the information entered into the textbox, search for it within my database, and display the results beneath the textbox for reference

<!----- fetchCedulaData.php This script retrieves data from the database and performs a search to return results ---------------------------- - --> <?php require("connection.php"); $cedula=$_REQUEST["cedula"]; //$cedula="0922615646"; echo $cedu ...

javascriptphphtmlajax

Angular allows for the dynamic updating of og meta tags

Sharing dynamic content on WhatsApp has been made possible through an API. By utilizing the angular Meta class in my component.ts file, I am able to dynamically update the default meta tag property in index.html with the latest content. ...

htmlangulartypescriptmeta-tagsog-meta

The data on the map is failing to display in React.js

I've managed to successfully retrieve data from an API and store it in a list. However, when I try to render the data using my return statement, nothing shows up on the screen even though the console.log displays the data correctly. The information is ...

htmlreactjs

Arrangement of items in a grid featuring a row of three items, each with an automatic width

I'm facing challenges with achieving a specific layout: https://i.sstatic.net/a5ETh.png https://i.sstatic.net/I7fuS.png My goal is to have the left and right elements automatically adjust their width to cover all the empty space on either side of t ...

htmlcssreactjsmaterial-uigrid-layout

Here is a guide on how to use clip-path polygons in CSS to achieve rounded corners for images displayed with the img tag

I need to design a polygon with a rounded corner, similar to the image in this https://i.sstatic.net/RzLPu.png. To achieve this, I want the last part (35% 100%) to have a border-radius of 30px. Any suggestions on how I can accomplish this? Thank you in adv ...

javascripthtmlcss

Resize the Bootstrap select element based on its contents

My HTML code includes a <select> element that is styled using Bootstrap 5. <div class="col-md-12"> <div class="mb-3"> <label asp-for="Schedule.Minutes" class="control-label"></l ...

htmlcsstwitter-bootstrapasp.net-corebootstrap-5

Employ jQuery to set values for hidden input elements

I'm facing an issue where I need to assign a value to a hidden field on a form that I attach to a div when a button is clicked. Below is the snippet of my HTML code: <div style="margin-bottom:5px" class="comment" data-commentID="<?php echo $c- ...

phpjqueryhtml

Can someone describe the cell phone symbol displayed in Google search results?

As I work on developing a mobile-friendly version of my website, I have noticed the presence of a mobile icon in Google search results. I am curious to learn more about what this mobile icon signifies and how I can effectively utilize it for optimizing m ...

htmlseo

Is there a way in Python to extract the Address IDs that contain 'ACT' from this turtle file?

As a newcomer to the Semantic Web, I am eager to extract address IDs containing 'ACT' from a webpage, save the information in RDF structure, and store it in a database for future reference. Here is the code snippet I have used: import requests ...

pythonhtmlweb-scrapingrdf

Increased height of iPad screen in landscape mode with no body content displayed (iOS7)

The issue: An unusual problem occurs when the specified URL is loaded on an iOS7 iPad in landscape mode; a vertical scrollbar appears. There is absolutely no content within the body, and it seems to be adjusting the body/html margin/padding. It should be ...

cssipadios7landscape

Angular2 faces a challenge with the selection issue

I have created a Plunker code for you to review. If you click the "toggle show" button twice, the selected item should be displayed. import {Component} from '@angular/core'; @Component({ selector: 'my-app', template: `<div *ngI ...

javascripthtmlangularjsangular