3 cara untuk menyelesaikan masalah bahawa lapisan terapung (pengepala terapung, pengaki) menyekat kandungan pada kemahiran tutorial terminal_html5 mudah alih

Dalam halaman hujung hadapan hari ini, terutamanya pada peranti mudah alih, selalunya perlu untuk menggantung

atau

, seperti berikut Seperti yang ditunjukkan dalam rajah.

Modul "Topik Balas" mengikuti terapung halaman dan sentiasa digantung di bahagian bawah halaman Struktur kod adalah seperti berikut.

Salin kod

Kodnya adalah seperti berikut:

...

Balas topik

...

Untuk mencapai fungsi sedemikian, sudah tentu, anda perlu menggunakan position:fixed. Walau bagaimanapun, terdapat pepijat dalam menggunakan kedudukan: tetap Ambil

terapung di bahagian bawah sebagai contoh (begitu juga dengan

terapung apabila halaman meluncur ke bawah, ia keluar dari aliran dokumen biasa disebabkan kedudukan tetap , mengakibatkan beberapa kandungan dikaburkan. Seperti yang ditunjukkan di bawah:

Sebelah kiri di atas ialah paparan bermasalah, dan sebelah kanan ialah paparan biasa. Jadi, bagaimana untuk menyelesaikan masalah ini? Di sini, saya ingin mengemukakan tiga pendapat saya, berharap dapat mencari jalan yang lebih baik.

Kaedah 1. Penyelesaian Javasrript

Gunakan js untuk menyelesaikan masalah Apabila peluncur meluncur ke bahagian bawah kandungan halaman, tukar kedudukan tetap yang pada asalnya akan memisahkan diri daripada aliran dokumen kepada kedudukan relatif yang tidak terlepas daripada aliran dokumen.

Menggunakan skrip untuk menyelesaikan masalah adalah kaedah yang paling sukar Cuba untuk tidak menggunakan skrip jika ia boleh diselesaikan dengan css, tetapi ia masih merupakan kaedah.

Salin kod

Kod adalah seperti berikut:

//Skrol bar pada Jarak tatal paksi Y
fungsi getScrollTop(){
kembalikan document.body.scrollTop;
}
//Jumlah ketinggian dokumen
fungsi getScrollHeight(){

Kembalikan document.body.clientHeight;
}
//Ketinggian port pandangan penyemak imbas
fungsi getWindowHeight(){
var windowHeight = 0;
if(document.compatMode == "CSS1Compat")
　{
　windowHeight = document.documentElement.clientHeight;
　}
lain
{
🎜 > Kembalikan windowHeight;
}

//Pemantauan gelongsor
window.onscroll = function(){
//Apabila meluncur ke bawah, pengaki ditetapkan ke bahagian bawah, dengan mengandaikan bahawa ketinggian

🎜> if((getScrollHeight () - getScrollTop() - getWindowHeight()) > 61)
$('.footer').css('position','fixed'); $('.footer' ).css('kedudukan','relative');
}




Kaedah 2. Tambahkan padding-bottom pada badan

Tambahkan atribut padding-bottom pada teg html supaya kandungan aliran dokumen biasa akan menjadi jarak yang ditetapkan oleh padding-bottom dari bahagian bawah badan.

Kelemahannya ialah dengan mengambil kira penggunaan semula modul dan keperluan kerap untuk menggabungkan fail css selepas projek dilancarkan, apabila halaman lain tidak memerlukan blok terapung ini, ia akan membebankan halaman yang tidak memerlukan

kedudukan tetap , yang tidak disyorkan Gunakan kaedah ini.

Salin kod

Kod tersebut adalah seperti berikut://Anggap ketinggian

ialah 60pxbody

{

padding-bottom: 60px;

}




Kaedah 3. Tambah pemegang tempat adik beradik

Saya secara peribadi berpendapat kaedah ini adalah yang paling praktikal Balutkan lapisan div di luar blok

dan kemudian tambahkan blok

;div> blok Tetapkan pada ketinggian yang sama dengan

, halaman akan meluncur ke bawah Pada asalnya, blok tuding

dengan sempurna bertindih dengan blok pemegang tempat. Ia tidak akan menjejaskan halaman lain. Kodnya adalah seperti berikut:

Satu-satunya kelemahan ialah ia tidak semantik dan menambah tag kosong tanpa kandungan yang besar.

Salin kod

Kod tersebut adalah seperti berikut:

Balas topik< ;

Di atas adalah tiga kaedah yang saya fikirkan Saya mempunyai sedikit bakat dan pengetahuan Jika terdapat sebarang kesilapan atau kaedah yang lebih baik, sila maklumkan kepada saya.

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

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Repo: Cara menghidupkan semula rakan sepasukan

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

3 minggu yang lalu By DDD

R.E.P.O. Simpan Fail Lokasi: Di ​​manakah & bagaimana untuk melindunginya?

3 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7338

9

Tutorial Java

1627

14

Tutorial CakePHP

1352

46

Tutorial Laravel

1265

25

Tutorial PHP

1210

29

Tunjukkan Lagi