如何在 CSS 中创建全高、固定宽度、居中的列？

实现具有固定宽度、集中单列和从页眉到页脚的高度的 CSS 布局

设计网站布局时，创建网站布局可能具有挑战性具有固定宽度的单个中心列，跨越页面的整个高度，不包括页眉和页脚。本文探讨了使用纯 CSS 来解决此问题的两种潜在解决方案。

选项 1：在现代浏览器中使用 Flexbox

对于支持 Flexbox 的浏览器，一种简单的方法是使用 Flexbox 容器：

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

<header>header</header>
<div>

选项 2：绝对定位以获得更广泛的浏览器兼容性

对于更广泛的浏览器兼容性，另一种解决方案是使用绝对定位：

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>

以上是如何在 CSS 中创建全高、固定宽度、居中的列？的详细内容。更多信息请关注PHP中文网其他相关文章！