Buat elemen footer yang terletak di bawah layar

Saya memiliki halaman yang tidak memenuhi tinggi seluruh layar, namun saya ingin footer tetap berada tepat di bawah layar, sehingga muncul tepat saat Anda mulai menggulir - tidak peduli tinggi layar orang tersebut.

Bagaimana cara mencapai ini menggunakan CSS?

EDIT

Saya telah mencoba:

#footer{
    position:absolute;
    left:0px;
    top:100%;
}

Ini berfungsi, namun akan menghalangi jika laman saya melebihi ketinggian layar. Saya sangat membutuhkan kompatibilitas untuk kedua jenis halaman.


html layout css footer
person Hope4You    schedule 27.10.2012    source sumber
comment
iklan hasil edit) coba atur margin-top: -HEIGHT   -  person J. K.    schedule 28.10.2012
comment
@IanKuca tingginya tergantung pada ukuran halaman   -  person Hope4You    schedule 28.10.2012
comment
Ketinggian footer? Itu menyedihkan.   -  person J. K.    schedule 28.10.2012
comment
@IanKuca Saya mencoba mengetikkan tinggi footer. Ini berfungsi, tetapi footer menghalangi jika halaman saya yang sebenarnya melebihi tinggi layar. Jika halamannya melebihi tinggi layar, saya ingin footernya tepat di bawah halaman lainnya.   -  person Hope4You    schedule 28.10.2012

Jawaban (2)


arrow_upward
1
arrow_downward

Berikut ini contoh sederhana tata letak yang Anda gambarkan:

HTML

<html>
<head><title>Hidden Footer</title></head>
<body>
    <div id="content">
        Content here
    </div>
    <div id="footer">
        Footer here
    </div>
</body>
</html>

CSS

html,
body { height: 100%; min-height: 100%; }

#content { min-height: 100%; }
#footer { background: #ccc; }
person Kevin Boucher    schedule 27.10.2012
comment
Saya hanya mencoba kode contoh Anda, dan berfungsi dengan baik, tidak peduli berapa panjang content saya! Terima kasih. - person Hope4You; 28.10.2012
comment
Apakah ada cara untuk melakukan ini tanpa menambahkan atribut CSS tersebut ke html dan body? Saya ingin menjaga tag ini bebas dari atribut semacam ini. - person Hope4You; 28.10.2012
comment
Yang Anda maksud dengan 'atribut' adalah CSS yang diterapkan pada elemen tersebut? Jika ya, sayangnya, tidak. Gaya tersebut diperlukan untuk mendorong footer di bawah viewport. (Saya tidak keberatan menambahkan CSS ke kedua elemen tersebut. Hal ini dilakukan sepanjang waktu untuk tata letak yang 'relatif area pandang') Area konten tidak akan diperluas hingga 100% tanpa wadah isi dan html mengizinkannya . - person Kevin Boucher; 28.10.2012

arrow_upward
0
arrow_downward

Halaman yang Anda tautkan memiliki header tetap. Bagian tubuh lainnya bergulir dengan tepat.

Periksa header/footer CSS yang diperbaiki untuk meniru efeknya.

person Lowkase    schedule 27.10.2012
comment
Berapa tinggi layar Anda? Saat saya mengubah ukuran browser pada halaman tertaut, footer akan selalu muncul tepat setelah saya mulai menggulir, selama saya menyisakan ruang kosong setelah formulir kontak. - person Hope4You; 28.10.2012
comment
Bagaimana cara menggunakan footer tetap? Saya tidak ingin footernya langsung muncul. - person Hope4You; 28.10.2012