How to Create a Full-Height, Fixed-Width, Centered Column in CSS?

Implementing a CSS Layout with a Fixed-Width, Centralized Single Column and Height Spanning from Header to Footer

When designing a website layout, it can be challenging to create a single central column with fixed width that spans the full height of the page, excluding the header and footer. This article explores two potential solutions to this issue using pure CSS.

Option 1: Using Flexbox for Modern Browsers

For browsers supporting Flexbox, a straightforward approach involves using a flexbox container:

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

<header>header</header>
<div>

Option 2: Absolute Positioning for Wider Browser Compatibility

For wider browser compatibility, an alternative solution is to use absolute positioning:

body {position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
header {position: absolute; top: 0; left: 0; right: 0; height: 50px;}
#main {position: absolute; top: 50px; bottom: 0; left: 50%; transform: translate(-50%, 0); width: calc(100% - 100px);}
footer {position: absolute; bottom: 0; left: 0; right: 0; height: 50px;}

<header>header</header>
<div>

The above is the detailed content of How to Create a Full-Height, Fixed-Width, Centered Column in CSS?. For more information, please follow other related articles on the PHP Chinese website!