Bagaimana untuk Membetulkan Pengaki daripada Tidak Mengambil Lebar Halaman Penuh?

Mary-Kate Olsen
Lepaskan: 2024-11-11 01:14:03
asal
161 orang telah melayarinya

How to Fix the Footer from Not Taking Up Full Page Width?

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan