Bagaimana untuk Membetulkan Pengaki daripada Tidak Mengambil Lebar Halaman Penuh?

Menyelesaikan Dilema Fixed Footer

Anda menghadapi isu di mana div "footer" anda, walaupun anda mencuba penggayaan, gagal menyelesaikannya lebar halaman penuh, meninggalkan ruang putih yang boleh dilihat di bawahnya. Mari kita selidiki kod CSS anda dan temui penyelesaiannya.

CSs semasa anda termasuk sifat seperti 'position: relative' dan 'top: 490px,' yang meletakkan footer relatif kepada bekas induknya dan mengimbanginya secara menegak sebanyak 490 piksel. Walaupun pendekatan ini mungkin berfungsi untuk senario asas, ia tidak menjamin bahawa pengaki akan sentiasa dibetulkan di bahagian bawah halaman, terutamanya jika kandungan halaman berubah secara dinamik.

Sebaliknya, mari kita terokai teknik alternatif:

1. Kaedah Pengaki Melekit:

Kaedah ini menggunakan teknik CSS yang bijak yang membolehkan pengaki kekal di bahagian bawah halaman, walaupun tidak ada kandungan yang mencukupi untuk mengisi port pandangan. Ia melibatkan penetapan sifat 'min-height' kepada 100% pada div 'wrapper' dan 'height' kepada '142px' pada kedua-dua div 'footer' dan 'push'.

html ,<br>badan {<br> tinggi: 100%;<br>}</p><p>.pembungkus {<br> ketinggian min: 100%;<br> tinggi: auto !penting;<br> tinggi : 100%;<br>}</p><p>.pengaki,<br>.tolak {<br> tinggi: 142px;<br>}<br>

2. Kaedah Flexbox Footer:

Pendekatan ini menggunakan modul susun atur flexbox untuk meletakkan footer di bahagian bawah halaman. Tetapkan 'display: flex' pada div 'wrapper' dan 'flex-direction: column' untuk menjajarkan elemennya secara menegak. Kemudian, tetapkan 'flex-grow: 1' pada div 'utama' dan 'flex-shrink: 0' pada div 'footer'.

.wrapper {<br> paparan: flex ;<br> flex-direction: lajur;<br>}</p><p>.utama {<br> flex-grow: 1;<br>}</p><p>.footer {<br> flex- mengecut: 0;<br>}<br>

Faedah Kaedah Ini:

• Memastikan kedudukan pengaki pada halaman bawah: Kedua-dua kaedah menjamin bahawa pengaki kekal di bahagian bawah halaman.
• Menghapuskan ruang putih di bawah pengaki: Teknik menghalang sebarang ruang putih yang tidak cantik daripada muncul di bawah pengaki .
• Responsif kepada perubahan kandungan: Kaedah ini melaraskan kedudukan pengaki secara automatik berdasarkan ketinggian kandungan halaman, memastikan reka letak yang konsisten dan menarik secara visual.

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Pengaki daripada Tidak Mengambil Lebar Halaman Penuh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!