CSS for the footer at the bottom of the page

Question

CSS for the footer at the bottom of the page

Check out this fiddle where I am trying to create a footer that remains at the bottom of the page, similar to the screenshot provided:

However, I'm facing an issue where when the browser window is resized so that the viewport is smaller than the content area, and the page becomes scrollable, the footer ends up in the middle of the page instead of staying below the content. Once scrolling occurs, the footer aligns itself with the middle of the content boxes, as shown in another screenshot:

Is there a way to achieve a footer that sticks to the bottom of the viewport when no scrollbar is present, but then moves to the bottom of the content boxes once scrolling becomes necessary due to content extending past the viewport?

Currently, I am utilizing position:absolute; bottom:0; on the footer. Should I be adding additional properties to my content box or footer? Any guidance would be greatly appreciated!

css positioning footer sticky-footer

Answer 1

Answer №1

If you're looking to achieve this using CSS, there have been numerous attempts with various hacks and workarounds. However, the simpler solution often involves using Javascript. But if you prefer a pure CSS approach, here's a typical strategy:

1) Begin by setting * to border-box:

* {
    -webkit-box-sizing:border-box;
    -moz-bos-sizing:border-box;
    box-sizing:border-box;
}

2) Next, designate your footer to position:absolute with a fixed height:

#footer {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:40px;
}

3) Ensure that html, body, and your container all have a height of 100%, minimum height of 100%, and set your container's position to something other than static. Also, add padding-bottom to accommodate your footer height plus any desired gap:

html,body,#container {
    height:100%;
    min-height:100%;
}

#container {
    position:relative;
    padding-bottom:50px;
}

This setup should function adequately for IE8 versions and newer. Handling compatibility with IE7 and below can prove to be quite challenging—additional research may be required in those cases. A couple of key points to remember:

The box-sizing declaration is crucial for ensuring that the height of 100% takes padding into account.
When employing position:absolute on a child element, the parent must have a position value other than static to establish the child's positioning relative to the parent. Otherwise, the position will default to the nearest ancestor with a non-static position (which could be the window).

Answer 2

If you're looking to achieve this using CSS, there have been numerous attempts with various hacks and workarounds. However, the simpler solution often involves using Javascript. But if you prefer a pure CSS approach, here's a typical strategy:

1) Begin by setting * to border-box:

* {
    -webkit-box-sizing:border-box;
    -moz-bos-sizing:border-box;
    box-sizing:border-box;
}

2) Next, designate your footer to position:absolute with a fixed height:

#footer {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:40px;
}

3) Ensure that html, body, and your container all have a height of 100%, minimum height of 100%, and set your container's position to something other than static. Also, add padding-bottom to accommodate your footer height plus any desired gap:

html,body,#container {
    height:100%;
    min-height:100%;
}

#container {
    position:relative;
    padding-bottom:50px;
}

This setup should function adequately for IE8 versions and newer. Handling compatibility with IE7 and below can prove to be quite challenging—additional research may be required in those cases. A couple of key points to remember:

The box-sizing declaration is crucial for ensuring that the height of 100% takes padding into account.
When employing position:absolute on a child element, the parent must have a position value other than static to establish the child's positioning relative to the parent. Otherwise, the position will default to the nearest ancestor with a non-static position (which could be the window).

CSS for the footer at the bottom of the page

Answer №1

Similar questions

Having trouble changing the color of the active icon in Material UI stepper

Can text automatically adjust its size based on the browser's dimensions using CSS?

Problem encountered with a selection menu

Is there an issue with margin parsing in Firefox 9 for Mac?

Utilizing Javascript to implement a tooltip feature for dynamically inserted text

Strange anomaly occurs when resizing and blurring an image on Chrome

Revamp the sequence of divs using jQuery

Create a fully responsive introduction page with three columns using Bootstrap, ensuring that the height of the

What causes the size of an image to decrease when placed within an anchor tag?

What steps can be taken to address issues with the counting system in a lootbox opening

icon from font-awesome changes color when hovering over

How can I eliminate or override the CSS property from a content delivery network (CDN)?

"Implemented a user-friendly header and footer that stick to the top and

Adjusting column width in Bootstrap grid when content is missing

CSS styling doesn't take effect until the page is reloaded due to the failure of cssText

Ways to create space between rows

Tips for maintaining an open sub menu while hovering over a link

External CSS stylesheets fail to function properly in the presence of the Bootstrap framework

The transition effect does not seem to be functioning properly within the mobile menu on a React JS application utilizing styled

Identifying rectangular shapes in an image and overlaying a div on top using Jquery