Home > Web Front-end > CSS Tutorial > How Can I Create a Sticky Footer That Remains at the Bottom of the Page or Content, Whichever Is Lower?

How Can I Create a Sticky Footer That Remains at the Bottom of the Page or Content, Whichever Is Lower?

Linda Hamilton
Release: 2024-12-25 03:44:20
Original
598 people have browsed it

How Can I Create a Sticky Footer That Remains at the Bottom of the Page or Content, Whichever Is Lower?

Footer at the Bottom of Page or Content, Whichever Is Lower

Introduction

In web development, it's essential to ensure the proper positioning of elements on a webpage, especially when dealing with dynamic content. One common challenge is achieving a footer that remains at the bottom of the page or content, depending on which is lower.

Problem Statement

The provided HTML structure includes a parent wrapper element (#main-wrapper) containing a header, navigation, article, and footer. The challenge is to dynamically adjust the footer's position based on the content height within the article element. The footer should stick to the bottom of the page when there's ample content but move to the bottom of the browser window when content is limited.

Flexbox Solution

One robust and modern approach to solving this problem is by leveraging flexbox. Flexbox offers a versatile layout system that simplifies positioning and alignment of elements within a container. By making use of flexbox's ability to vertically align elements, we can achieve the desired sticky footer behavior.

CSS Code

The following CSS code employs flexbox to implement the sticky footer:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}
Copy after login

In this setup, the #main-wrapper element is the flexbox container, and it has flex-direction set to column, meaning elements will be stacked vertically. The article element has flex: 1, which makes it occupy the remaining space not taken up by the header and navigation.

When there is ample content within the article, it grows to push the footer down, positioning it at the bottom of the page. However, when content is limited, the article shrinks, and the footer dynamically moves to the bottom of the browser window, as the #main-wrapper element's min-height ensures it always fills the viewport.

The above is the detailed content of How Can I Create a Sticky Footer That Remains at the Bottom of the Page or Content, Whichever Is Lower?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template