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 60px

body

{

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.