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

100% Minimum Height CSS Layout

When creating a CSS layout, it's crucial to ensure that elements maintain a minimum height across various browsers. This task becomes particularly challenging when dealing with a layout featuring a fixed-height header and footer, where the content area needs to occupy the remaining space and stay fixed at the bottom.

Effective Solution:

To achieve a 100% minimum height layout, the following approach can be utilized:

• Min-height: Set the min-height property of the container element to 100%. This forces the container to remain at a minimum height of 100%, allowing the content area to expand vertically.
• Relative Positioning: Position the container element relatively, which allows the footer element to remain fixed at its bottom.
• Padding-bottom: Use padding-bottom on the content area to create space for the absolute footer element. This ensures the footer doesn't overlap the content.

Implementation:

Consider the following CSS code:

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

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

#content {
    padding-bottom: 5em;  
}

Browser Compatibility:

This solution works effectively across modern browsers, including Google Chrome, Mozilla Firefox, and Safari. It also ensures compatibility with Internet Explorer 6 and up.

Usage:

To implement this layout, simply set the minimum height of the container element and add the necessary positioning and padding to the content and footer elements. This will ensure that the content area fills the available space while keeping the footer fixed at the bottom, regardless of the amount of content.

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