Home >Web Front-end >CSS Tutorial >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:
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!