- Konu sahibi
- #1
CSS’te
Aşağıdaki örnekte kutu, görünüm alanının yarısı kadar yüksek olur:
Masaüstü tarayıcıda görünüm alanı 900 piksel yüksekliğindeyse
Önce bölümün içeriğinin büyüyüp büyümeyeceğine karar verin. Sabit bir ekran yüksekliği vermek yerine çoğu içerik bölümünde
Tablo karar vermeyi kolaylaştırır; ancak
Mobilde iki alternatif önemlidir: svh, tarayıcı çubuklarının alan kullandığı küçük görünüm alanını; dvh ise dinamik görünüm alanını izler. Ekrana sığması gereken bir içerik bölümü için önce 100vh yedeği, ardından 100svh kullanılabilir:
Dinamik çubuklar açılıp kapanırken yüksekliğin de değişmesini istiyorsanız 100dvh seçeneğini değerlendirin. Bu değişim kaydırma sırasında yeniden boyutlanma yaratabilir. min-height tek başına vh'nin büyük alan referansını değiştirmez; içerik büyümesine izin verme ile doğru viewport birimini seçme ayrı kararlardır.
Örneğin
Her kutuya 100vh vermek: Sayfanın her bölümünü tam ekran yapmak gereksiz boşluk ve uzun kaydırma oluşturabilir. Yalnızca ekran yüksekliğiyle anlamlı ilişkisi olan bölümlerde kullanın.
vh’yi genişlik birimi sanmak:
Mobil görünümde kesilmeyi yok saymak:
Kutuya verilen iç boşluk, kenarlık veya içerik yüksekliği toplam ölçüyü artırabilir.
vh, tarayıcı görünüm alanının yüksekliğine göre ölçü belirleyen bir birimdir. 1vh, görünüm alanı yüksekliğinin yüzde 1’ine eşittir; Modern görünüm alanı tanımında vh, büyük görünüm alanı birimi lvh ile eşdeğerdir; mobil çubuklar açıkken o anda görülen küçük alanı her zaman temsil etmez. Örneğin görünüm alanı 800 piksel yüksekliğindeyse 50vh yaklaşık 400 piksel olur.vh nasıl çalışır?
vh sabit piksel değeri değildir. Tarayıcı penceresinin veya cihazdaki görünüm alanının yüksekliği değiştiğinde hesaplanan sonuç da değişir. Bu nedenle ekranın büyük bölümünü kaplayan karşılama alanları, tam ekran panelleri ve dikey hizalama gerektiren bölümler için kullanışlıdır.Aşağıdaki örnekte kutu, görünüm alanının yarısı kadar yüksek olur:
Kod:
<section class="hero">
<h1>Hoş geldiniz</h1>
</section>
<style>
.hero {
min-height: 50vh;
display: grid;
place-items: center;
padding: 2rem;
box-sizing: border-box;
}
</style>Masaüstü tarayıcıda görünüm alanı 900 piksel yüksekliğindeyse
50vh yaklaşık 450 piksel hesaplanır. Pencere yüksekliği değişirse bölüm de buna göre yeniden boyutlanır. min-height kullanıldığı için içerik kutuya sığmazsa kutu içerik kadar büyüyebilir; bu, uzun metinlerde height: 50vh kullanımına göre daha güvenlidir.Hangi durumda hangi kullanım uygundur?
Önce bölümün içeriğinin büyüyüp büyümeyeceğine karar verin. Sabit bir ekran yüksekliği vermek yerine çoğu içerik bölümünde
min-height tercih edilir.| İhtiyaç | Uygun yaklaşım | Nedeni |
|---|---|---|
| Ekranın yaklaşık yarısını kaplayan bölüm | min-height: 50vh | İçerik artarsa bölüm büyüyebilir |
| Görünüm alanını dolduran panel | min-height: 100vh | Başlangıç yüksekliğini ekranla ilişkilendirir |
| Bir üst ve alt bölümden kalan alan | height: calc(100vh - 80px) | Bilinen yüksekliği hesaba katar |
Tablo karar vermeyi kolaylaştırır; ancak
100vh her cihazda kullanıcıya görünen alanla birebir aynı davranmayabilir. Özellikle mobil tarayıcılarda adres çubuğu ve alt gezinme çubuğu açılıp kapandığında kullanılabilir alan değişebilir. Bu yüzden yalnızca dekoratif bir kahraman bölümü için 100vh kullanılabilirken, form veya düğme gibi önemli içeriği taşıyan alanlarda içeriğin kesilmemesine dikkat edilmelidir.Mobilde iki alternatif önemlidir: svh, tarayıcı çubuklarının alan kullandığı küçük görünüm alanını; dvh ise dinamik görünüm alanını izler. Ekrana sığması gereken bir içerik bölümü için önce 100vh yedeği, ardından 100svh kullanılabilir:
CSS:
.panel {
min-height: 100vh;
min-height: 100svh;
box-sizing: border-box;
}Dinamik çubuklar açılıp kapanırken yüksekliğin de değişmesini istiyorsanız 100dvh seçeneğini değerlendirin. Bu değişim kaydırma sırasında yeniden boyutlanma yaratabilir. min-height tek başına vh'nin büyük alan referansını değiştirmez; içerik büyümesine izin verme ile doğru viewport birimini seçme ayrı kararlardır.
Uygulama adımları
- Yüksekliğini ekranla ilişkilendirmek istediğiniz HTML bölümüne bir sınıf verin; örneğin
class="hero". - Başlangıç yüksekliğini
min-height: 100vh;veya ihtiyaca göremin-height: 50vh;ile belirleyin. - İçeriğin kutu dışına taşmaması için genellikle
paddingvebox-sizing: border-box;kullanın. - Mobil cihazda menü veya alt gezinme çubuğu nedeniyle içerik kesiliyorsa yüksekliği zorunlu tutmak yerine
min-heightkullanın ve içeriğin doğal olarak büyümesine izin verin. - Tarayıcıyı farklı pencere yüksekliklerinde test edin. Beklenen sonuç, bölümün görünüm alanının oranına göre değişmesi ve metin arttığında içeriğin kesilmemesidir.
Örneğin
height: 100vh verilen bir kutuda içerik görünmüyor veya alt kısım kesiliyorsa sorun genellikle kutuya sabit yükseklik verilmesidir. min-height: 100vh değerine geçmek çoğu içerik bölümü için daha uygun bir ilk düzeltmedir. Ayrıca içeriğin kendi padding değerinin toplam yüksekliği etkileyebileceğini ve box-sizing: border-box kullanılmadığında taşma oluşturabileceğini kontrol edin.Sık yapılan hatalar
Her kutuya 100vh vermek: Sayfanın her bölümünü tam ekran yapmak gereksiz boşluk ve uzun kaydırma oluşturabilir. Yalnızca ekran yüksekliğiyle anlamlı ilişkisi olan bölümlerde kullanın.
vh’yi genişlik birimi sanmak:
vh görünüm alanının yüksekliğine, vw ise genişliğine bağlıdır. Kare veya orantılı genişlik-yükseklik tasarımında yanlış birim kullanmak beklenmedik sonuç verir.Mobil görünümde kesilmeyi yok saymak:
100vh kullanılan bir panelde düğme veya form alt tarafa taşabilir. İçeriği kontrol edin; gerekirse min-height kullanın veya daha yeni görünüm alanı birimlerini ayrıca değerlendirin.Kaynaklar
Sık sorulan sorular
vh ile yüzde (%) arasındaki fark nedir?
vh görünüm alanının yüksekliğine göre hesaplanır. % ise çoğunlukla kapsayıcının yüksekliğine göre hesaplanır; kapsayıcının belirli bir yüksekliği yoksa sonuç beklediğiniz gibi olmayabilir.100vh içeriği neden ekranın dışına taşıyor?
Kutuya verilen iç boşluk, kenarlık veya içerik yüksekliği toplam ölçüyü artırabilir.
box-sizing: border-box kullanın ve içeriğin büyüyebileceği bölümlerde height yerine min-height tercih edin.