设计网站布局时，创建网站布局可能具有挑战性具有固定宽度的单个中心列，跨越页面的整个高度，不包括页眉和页脚。本文探讨了使用纯 CSS 来解决此问题的两种潜在解决方案。
对于支持 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>
对于更广泛的浏览器兼容性，另一种解决方案是使用绝对定位：
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中文网其他相关文章！
