How to Create a Full-Height Single-Column CSS Layout with Header and Footer?

Creating a CSS-based Single-column Layout with Header and Footer

Within the realm of CSS layout design, the challenge of creating a fixed-width, single-column layout that spans the entire height of the page, excluding the header and footer, can be encountered. To cater to this requirement, various approaches have been brought forth, each with its unique advantages and drawbacks.

Fortunately, in modern browsers (2015 onwards), a straightforward and reliable solution is accessible using the display:flex property. This approach eliminates the need for JavaScript and provides a clean and efficient alternative.

The Solution using display:flex

To implement the layout with display:flex, follow these steps:

1. Set both the html and body elements to have a 100% height, no padding, and no margin.
2. Apply the display:flex and flex-direction:column properties to the body element. This will arrange the child elements vertically.
3. Create a #main element and set its flex-grow property to 1. This will cause the element to expand to fill the remaining vertical space.
4. Use the CSS properties min-height and background to style the header and footer as desired.

Example Code

html, body {height:100%; padding:0; margin:0; width:100%;}
body {display:flex; flex-direction:column;}
#main {flex-grow:1;}

/* optional */
header {min-height:50px; background:green;}
#main {background:red;}
footer {min-height:50px; background:blue;}

<header>header</header>
<div>

By utilizing this technique, it is possible to create a single-column layout that meets the specified criteria, ensuring compatibility with modern browsers.

The above is the detailed content of How to Create a Full-Height Single-Column CSS Layout with Header and Footer?. For more information, please follow other related articles on the PHP Chinese website!