I'm looking to keep the footer anchored at the bottom without using the absolute positioning

I am currently developing a website and have implemented a wrapper for the footer. My goal is to create a sticky footer, but when I minimize the screen, the footer ends up overlapping with the content and header.

#footerWrapper {
 height: 177px;
 bottom: 0;
 position: absolute;
 width: 100%;
}

The current solution positions the footer at the bottom of the page regardless of screen size, which is what I want. However, when I minimize the screen and move it up, the footer remains absolute and stays on that specific page.

My desired outcome would be for the footer to stay on the particular page rather than being fixed in one position. Any suggestions or ideas on how to achieve this?

htmlasp.netcsssticky-footer

Answer №1

This solution works perfectly, even on mobile devices...

HTML:

<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</body>

CSS:

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    padding:10px;
    background:#5ee;
}
#content {
    padding:10px;
    padding-bottom:80px; /* Height of the footer element */
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
}

source:

demo:

Answer №2

To ensure the footer remains sticky without overlapping the header, I utilized z-index in my CSS. Simply assigning higher z-index values to the topmost DIV elements did the trick.

    #headWrapper {
        padding-bottom: 0px;
        position: relative;
    }
    #headWrapper {
        z-index: 2;
        height: 160px;
        /* width: 960px; */
        margin: 0 auto;
        background: url(/images/PageImages/homeHeadBack.png) repeat-x;
    }

    #footerWrapper {
        background: url(/images/PageImages/footerBack.png) repeat-x;
        height: 177px;
        position: absolute;
        width: 100%;
        bottom: 0;
        z-index: 1;
    }

It's important to note that #headWrapper must have a specified position of relative for this solution to work properly. Feel free to start from here. This method was tested and proven effective on Chrome.

Answer №3

Give this a shot

#footerWrapper{
    position: absolute;
}

#contentWrapper{
    margin-bottom: 150px; /* adjust the height of the footer */
}

Answer №4

Okay, I believe I have a grasp on the concept you are trying to achieve

#footerWrapper {
   background: url(/images/PageImages/footerBack.png) repeat-x;
   height: 177px;
   position: fixed;
   width: 100%;
   bottom: 0px;
}

#contentWrapper {
   background: url(/images/PageImages/contentTopBack.png) no-repeat center top;
   min-height: 208px;
   margin-bottom: 177px;
}

If this solution doesn't work, then I may need more clarification on your goal.

Answer №5

Give this a shot.

HTML:

<html>
<head>

    <link rel="stylesheet" href="style.css" ... />

</head>

<body>

    <div class="container">

        <p>Insert your website content here.</p>

        <div class="spacer"></div>

    </div>

    <div class="footer-section">

        <p>© 2022 All Rights Reserved</p>

    </div>

</body>

</html>

CSS:

* {
margin: 0;
}
html, body {
height: 100%;
}
.container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer-section, .spacer {
height: 4em;
}

For additional details.

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

Contrasts between Flash and HTML5

Now that YouTube has transitioned from flash to HTML5, what are the unique features and functionalities of HTML5 that set it apart from flash? I am also curious to learn a more in-depth and intriguing aspect of HTML5 beyond what can be found through a sta ...

htmlflashadobe

What is the best way to apply an outer border to a table using CKEDITOR?

Is there a way to only add an outer border to an HTML table in CKEDITOR? I've attempted to remove the inner borders using the advanced options in CKEDITOR, but it doesn't seem to be working. <table border="1" cellpadding="1" cellspacing="1" ...

htmlcss

How can I use jQuery to create a new div element if it is not already present

I am familiar with how to add a class if it does not already exist, for example: $("ul:not([class~='bbox'])").addClass("bbox"); Alternatively, if(!$("ul").hasClass("class-name")){ $("ul").addClass("bbox"); } However, I am unsure how to c ...

javascriptjqueryhtml

Tips for expanding a flex-grow element to fill the area of a concealed flex item

I am looking to create a window that can be divided into two or three areas based on the state of a checkbox. When the box is checked, I want the second area to be hidden and the first area to expand to fill the additional space. My layout works perfectly ...

htmlcssflexboxhidden

Insert a horizontal line within the text

I am struggling to get the horizontal lines to work on my traffic light dashboard view for one of my website pages. Despite making multiple adjustments, it seems like I just can't get them to display correctly. Here is an example of what I want: View ...

htmlcss

Retrieve specific nested array values in Handlebars based on an index's value

While I understand that this question may have been asked previously, my query pertains to obtaining data in a specific pattern since I am relatively new to Handlebars. Currently, I have some JSON data structured as follows: "value": [ { ...

htmlnode.jsjsonhandlebars.js

Adjusting element placement on collapsed navbar using Bootstrap

I've been developing a navbar for a webpage and have successfully aligned the data left and right with the Brand in the center. However, when the navbar collapses, the alignment shifts to Left (over) Brand (over) Right. I want the Brand to remain at t ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Description for script tag in HTML body

How can I embed a GitHub gist on my website using the script tag? I currently use the following code: <script src="https://gist.github.com/uname/id.js"></script> I've been wondering if there is a way to add alt text in case the gist fail ...

javascripthtml

Scrolling animations do not support the Translate3d feature

I'm struggling to implement a smooth scroll effect on the header of my website. My approach involves using transform:translate3d for animation, with the goal of keeping the header fixed at the top and moving it out of view as the user scrolls down. I ...

jquerycss

Unable to define an object within the *ngFor loop in Angular

In order to iterate through custom controls, I am using the following code. These controls require certain information such as index and position in the structure, so I am passing a config object to keep everything organized. <div *ngFor="let thing of ...

javascripthtmlangulartypescript

The propagation of onClick events in elements that overlap

Having two divs absolutely positioned overlapping, each containing an onClick handler. The issue is that only the top element's onClick handler fires when clicked. React 17 is being used. Here is some sample code: <div style={{ position: "abs ...

javascripthtmlreactjstypescript

Display all information associated with the class that matches the clicked ID

Can anyone help me with a Jquery question? I am trying to display all data with the same class when I click on it. I have created a list of clickable items. When I click on an item, the corresponding data should be shown. However, the code I wrote is not ...

javascriptjqueryhtml

CSS: Turn off the custom styling for radio buttons

My dilemma lies in the custom radio button I've created using CSS. The issue is that while I can select the radio button, I cannot deselect it. Here is a snippet of the CSS code I used to create the custom radio button: input[type="radio"]:checked:be ...

htmlcss

The Navbar is not displaying the React Bootstrap 4 CSS module as intended

Having some trouble changing the color of my navbar. Is there a step I might be missing? Here's the component I'm trying to render: import React from 'react'; import { Nav, Navbar } from 'react-bootstrap'; import styles from ...

cssreactjsbootstrap-4react-bootstrapreact-bootstrap-nav

Seeking assistance in creating custom tabs for integration with a jQuery tabs plugin

Attempting to navigate the world of CSS as a newbie, I find myself struggling with creating tabs. Our current tab setup can be viewed here, but unfortunately, these tabs are created using an unattractive <table> tag. Below is the code responsible fo ...

jquerycsstabs

Only allow scrolling if the number of child elements exceeds a certain limit

I am looking to implement a scroll feature on the <ul> element when the number of <li>s exceeds a certain threshold. For example, if we have 12 children, I want to display only 7 of them and then scroll through the rest. This is my current app ...

javascriptjquerycss

Unable to execute project using CodeIgniter

I'm facing an issue with my current project. Unfortunately, I can't share the website due to confidentiality reasons. I apologize for any inconvenience this may cause. The project is built on the CodeIgniter framework, and it runs smoothly on lo ...

phphtml.htaccesscodeigniter

What is causing the failure of these "span" elements within an "a" tag in IE7?

Here is a code snippet that I am working with: HTML (version 4.0) <div class="temperatura"> <a href="/link/" class="temperatura_localita"> <span style="padding-left:12px;"> T ...

htmlcss

I want the navigation bar to appear only upon scrolling, but when I refresh the page it is already visible, and then vanishes as I start scrolling

I'm working on a project where I want the navigation bar to only appear after scrolling a certain distance down the page. However, I've noticed that when I refresh the browser, the navigation bar appears immediately and then disappears once I sta ...

javascripthtmlcssnavigationbar

What is the best way to use regular expressions to match text with varied endings?

Here is my current situation. <h2>Details</h2>\n +<p>(.*)<br />|</p> ^ there's a tab space, wondering if there's a better way to show one or more (seems to be working) I am attempting to f ...

phphtmlregex