Bagaimana untuk Mencipta Lajur Tinggi Penuh, Lebar Tetap, Berpusat dalam CSS?

Melaksanakan Reka Letak CSS dengan Lebar Tetap, Lajur Tunggal Berpusat dan Ketinggian Menjangkau dari Pengepala ke Pengaki

Apabila mereka bentuk susun atur tapak web, ia mungkin mencabar untuk mencipta satu lajur tengah dengan lebar tetap yang menjangkau ketinggian penuh halaman, tidak termasuk pengepala dan pengaki. Artikel ini meneroka dua penyelesaian yang berpotensi untuk isu ini menggunakan CSS tulen.

Pilihan 1: Menggunakan Flexbox untuk Penyemak Imbas Moden

Untuk penyemak imbas yang menyokong Flexbox, pendekatan mudah melibatkan penggunaan bekas 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>

Pilihan 2: Kedudukan Mutlak untuk Penyemak Imbas Lebih Luas Keserasian

Untuk keserasian penyemak imbas yang lebih luas, penyelesaian alternatif ialah menggunakan kedudukan mutlak:

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>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Lajur Tinggi Penuh, Lebar Tetap, Berpusat dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!