Bir sayfanın tam yüksekliği nasıl oluşturulur?

Question

Sayfanın tüm yüksekliğini almak için bir DIV öğesi ayarlayabilmemin bir yolu var mı? Bir şey gibi:

div.left { 
    height: 100%; 
    width: 50%; 
    background-color: blue; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Ben bunu bir kaç kez Google'd ettik ama hepsi muhtemelen basit bir çözüm ile gerçekten gerçekten basit sorunun ne için gerçekten çok karmaşık iş ya benziyorsun.

Answer 1

, bu çalışır: Aksi

body, html {height: 100%; } 
div { height: 100%; } 

, sen 's veliler, dedesi her birine height: 100% eklemeye devam etmek zorunda ... Eğer doğrudan ulaştınız untill body numaralı çocuk.

Bu basit. Çalışılacak yüzdelik bir yükseklik için ebeveynin belirtilen bir yüksekliğe (px,% ... hangisi olursa) sahip olması gerekir. Eğer değilse, o zaman height: auto ayarlamışsınız demektir;

Bunu yapmanın başka bir yolu da cevabınızda olduğu gibi: sayfanın yüksekliğini tanımlayan öğeye göre mutlak bir konum değeri vermek.

Answer 2

height: 100% değerini html ve body olarak ayarladığınızdan, div'in yükseklik için bir bağlamı olmasını sağlayın! Umarım yardımcı olur.

Answer 3

Oldukça emin% 100'e html ve body ayarlamanız gerekir:

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
} 

div.left { 
    height: 100%; 
} 

Fiddle here. divbody doğrudan çocuk ise

Answer 4

Bu, bir sayfanın bir sayfanın tüm yüksekliğini kaldırmasını sağlamanın en kolay yoludur.

yükseklik: 100vh;