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:
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!