yükseklik:% 100 veya min-yükseklik: html ve gövde öğeleri için% 100?

Düzenleri tasarlarken html, bodyöğeleri ' heightolarak ayarlıyorum 100%ama bazı durumlarda bu başarısız oluyor, peki ne kullanılmalı?

html, body {
   height: 100%;
}

veya

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

Her yöntemin kendi kusurları olduğu için bu fikir temelli değildir, öyleyse önerilen yol nedir ve neden?

Arka plan resimlerini uygulamaya çalışıyorsanız htmlve bodybu tüm tarayıcı penceresini doldurmazsa. Bunun yerine şunu kullanın:

html {
   height: 100%;
}

body {
   min-height: 100%;
}

Benim gerekçem burada verilmiştir (burada arka planları bu şekilde nasıl uygulayacağımı bütünsel olarak açıklayacağım):

Bu arada, belirtmek zorunda sebebi heightve min-heighthiç htmlve bodyne eleman herhangi yerleşik yüksekliğe sahip olduğundan, sırasıyla olduğunu. Her ikisi de height: autovarsayılan olarak. Yüksekliği% 100 olan görüntü alanıdır, bu nedenle height: 100%görüntü alanından alınır ve daha sonra bodyiçeriğin kaydırılmasına izin vermek için minimum olarak uygulanır .

İlk yol, height: 100%her ikisinde de kullanmak body, görüntü alanı yüksekliğinin ötesine geçmeye başladıktan sonra içeriğiyle genişlemeyi engeller . Teknik olarak bu , içeriğin kaydırılmasını engellemez , ancak bodygenellikle istenmeyen bir durum olan katlamanın altında bir boşluk bırakılmasına neden olur .

İkinci yol, min-height: 100%her ikisini de kullanmak body, tam yüksekliğe genişlemeye neden olmaz , htmlçünkü min-heightbir yüzde ile açık bir ifade bodyyoksa üzerinde çalışmaz .htmlheight

Eksiksizlik adına, CSS2.1'in 10. bölümü tüm ayrıntıları içerir, ancak bu son derece kıvrımlı bir okuma olduğundan, burada anlattığımın ötesinde bir şeyle ilgilenmiyorsanız atlayabilirsiniz.

Görüntü alanı yükseklik ( vh) birimini kullanabilirsiniz:

body {
    min-height: 100vh;
}

Ebeveyn boyuna değil ekrana bağlıdır, bu nedenle html yüksekliğine ihtiyacınız yoktur:% 100.