How to Create a Responsive Footer Using CSS

Maintaining the footer at the page's bottom is a common web design requirement. However, some users encounter difficulties using the "absolute" positioning property. This article will guide you through the correct CSS implementation to achieve a sticky footer effect without disrupting your layout.

Issue Background

Users attempting to fix their footer position unsuccessfully have typically applied the following code:

position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;

Proposed Solution

To resolve the issue without using plugins or additional HTML elements, follow these steps:

1. Add the following CSS rules to your stylesheet:

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
#bottom-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

2. Ensure that the height specified in "body {margin}" matches the actual height of the footer element (e.g., 100px).

Note: It's recommended to use the HTML element ID "#bottom-footer" for targeting instead of "footer #bottom-footer," as the latter may conflict with your original CSS styling.