Bagian Bawah Warna Latar Belakang/Gambar Latar Terpotong Di Situs Seluler

Saya telah memeriksa jawaban untuk pertanyaan serupa dan tidak ada jawaban yang membantu mengatasi masalah ini. Gambar latar belakang saya terpotong di bagian bawah area pandang. Jika saya menghapus gambar latar belakang dan memberi warna solid sebagai latar belakang, hal yang sama akan terjadi. Teks di halaman seluler terlihat, latar belakangnya terpotong begitu saja.

Lihat situs menggunakan mode perangkat Chrome sebagai iPhone 6 untuk mereplikasi. Bantuan apa pun mengenai masalah ini akan sangat dihargai!

Situs pengembang


mobile html css responsive-design background-image
person Eric    schedule 16.11.2014    source sumber

Jawaban (1)


arrow_upward
1
arrow_downward

Elemen content Anda disetel ke height:100% sehingga menjadikannya 100% tinggi induk-nya. Itu akhirnya tidak cukup tinggi untuk memuat elemen tinggi 1000px di dalamnya. Biasanya elemen hanya akan diperluas untuk memuat isinya, tetapi atribut height Anda mengesampingkan perilaku itu.

content sepertinya juga tidak perlu position:absolute;. Itu tidak membantu masalah ukuran.

Saya akan menyingkirkan:

div.content {
    position: absolute;
    top: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

Kemudian hapus juga gaya inline height: 1000px pada elemen .page.

person CodingWithSpike    schedule 16.11.2014
comment
Itulah yang saya dapatkan dengan menggabungkan berbagai teknik CSS, terima kasih atas bantuannya! - person Eric; 17.11.2014