設計網站佈局時，創建網站佈局可能具有挑戰性具有固定寬度的單一中心列，跨越頁面的整個高度，不包括頁首和頁尾。本文探討了使用純 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中文網其他相關文章！
