Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mencipta Lajur Tinggi Penuh, Lebar Tetap, Berpusat dalam CSS?

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

Susan Sarandon
Susan Sarandonasal
2024-12-14 18:48:12240semak imbas

How to Create a Full-Height, Fixed-Width, Centered Column in 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn