How to Create a 100% Minimum Height Layout with a Fixed Header and Footer?

How to Achieve 100% Minimum Height Layout Across Browsers

In web design, achieving a consistent layout with 100% minimum height can be a challenge across different browsers. Consider a layout composed of a fixed-height header and footer, with content that should occupy the remaining space and always fill the gap between the fixed elements. How can you ensure this functionality effectively?

Min-Height: The Foundation of Optimal Content Area

To establish the minimum height for the content area, the CSS min-height property proves invaluable. Apply this property to the element encapsulating the content, ensuring it fills at least 100% of the available space.

Relative Positioning: Keeping the Footer Grounded

Relative positioning, applied to the container element, plays a crucial role in maintaining the desired layout. With relative positioning, the footer element (#footer) will always remain at the bottom of the container, even as the content expands vertically.

Padding-Bottom: Allowing Space for the Footer

To accommodate the absolute footer positioned at the bottom of the container, padding-bottom should be added to the content area. This padding-bottom effectively creates the necessary vertical space for the footer to fit without overlapping the content.

Below is a code snippet demonstrating the implementation of this approach:

html, body {
    height: 100%;
}

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

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

#content {
    padding-bottom: 5em;
}

With this code, the content will dynamically adjust its height to fill the available space, while the footer always remains fixed to the bottom of the container. This technique effectively ensures a 100% minimum height layout that works seamlessly across various browsers.

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