How Can I Create a 100% Minimum Height CSS Layout with Fixed Header and Footer?

100% Min Height CSS Layout: Unlocking Adaptive Content Height

Achieving a fluid and adaptable layout where an element maintains a minimum height across varying browser contexts can be a challenge. This tutorial focuses on a prominent CSS layout technique to tackle this issue, particularly in scenarios involving fixed-height headers and footers.

Min-height Proposition

The cornerstone of this approach lies in assigning a 100% minimum height to the container element, symbolized by #container. This ensures that even when the content is insufficient to fill the available space, the element expands to occupy the entire height between the header and footer.

Relative Positioning

The #container element assumes a relative position, which allows the #footer element to remain fixed to its bottom, regardless of the content's length. The 100% minimum height specified earlier guarantees proper positioning, even when the content forces #container to expand vertically.

Padding-bottom Adjustment

Since #content is no longer part of the normal flow due to the relative positioning, we employ padding-bottom to create space for the absolute #footer. This padding contributes to the element's scrolled height, preventing the footer from overlapping the content above it.

Usage Example

The following CSS code exemplifies this layout technique:

div#container {
    position: relative;
    min-height: 100%;
}

div#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

div#content {
    padding-bottom: 5em; /* Provide space for the footer */
}

Responsive Adaptation

As the browser window resizes or text sizes change, the layout seamlessly adapts. The container adjusts its height to accommodate the content, while the footer remains anchored to the bottom. This ensures a consistent and visually pleasing experience for users.

The above is the detailed content of How Can I Create a 100% Minimum Height CSS Layout with Fixed Header and Footer?. For more information, please follow other related articles on the PHP Chinese website!