CSS Birimleri - vh / vw ve% arasındaki fark nedir?

138

Az önce yeni ve nadir bir CSS birimi öğrendim. vhve vwsırasıyla görünümün yükseklik ve genişlik yüzdesini ölçün.

Bu soruya Stack Overflow'dan baktım, ancak birimlerin daha da benzer görünmesini sağladı.

Vw ve vh ünitesi nasıl çalışır

Cevap özellikle şöyle diyor:

vw ve vh sırasıyla pencere genişliği ve yüksekliğinin bir yüzdesidir: 100vw genişliğin% 100'ü, 80vw% 80'dir, vb.

Bu %, daha yaygın olan birim ile tamamen aynı gibi görünüyor .

Geliştirici Araçları'nda değerleri vw / vh'den% ve viceversa'ya değiştirmeyi denedim ve aynı sonucu aldım.

İkisi arasında bir fark var mı? Değilse, bu yeni birimler neden tanıtıldı CSS3?

css viewport-units

— Richard Hamilton
kaynak

7

Vw / vh'nin yaptığı şey, herhangi bir üst öğeye bağımlılığı kaldırmaktır ve görünüm alanı boyutuna göre boyutlandırmaya izin verir.

— Etiketler

2

Diğer okuyucu, IanC'nin cevabı gününüzü iyi kurtarabilir, kontrol ettiğinizden emin olun.

— Skippy le Grand Gourou

167

100%her 100%şeyin yüksekliğinde olabilir . Ben bir ebeveyne varsa Örneğin, divvar 1000pxuzun boylu ve bir çocuk divolan 100%yüksekliği, o zaman o çocuk divteorik görünümün yüksekliğinden çok daha küçük görünümün veya yüksekliğinden çok daha uzun olabilir o halde divayarlanır 100%yükseklik .

Bunun yerine o çocuğu divayarlıyorsam 100vh, o zaman ebeveynin değil , sadece görünümün yüksekliğini dolduracaktır100%div .

body,
html {
    height: 100%;
}

.parent {
    background: lightblue;
    float: left;
    height: 200px;
    padding: 10px;
    width: 50px;
}

.child {
    background: pink;
    height: 100%;
    width: 100%;
}

.viewport-height {
    background: gray;
    float: right;
    height: 100vh;
    width: 50px;
}

<div class="parent">
    <div class="child">
        100% height
        (parent is 200px)
    </div>
</div>

<div class="viewport-height">
    100vh height
</div>

Snippet'i genişlet

— Josh Beam
kaynak

Bir önyükleme "satır" içinde iç içe bir kenar çubuğu vardı ve yüksekliği ayarladıktan sonra bile tam sayfa boyutu yapamadı:% 100. Benim için işe yarayan şey 100vh idi

— raghav710

28

Sorunun çok eski olduğunu biliyorum ve @Josh Beam en büyük farkı ele aldı, ama yine de başka bir sorun var:

Diyelim ki tüm manzarayı doldurmak istediğiniz bir <div>doğrudan çocuğunuz var . Daha fazla içerik ekleyene ve dikey kaydırma çubuğu görünene kadar hepsi aynı şekilde çalışır . Yana görünümün bir parçası olarak kaydırma için hesaba, biraz daha büyük olacak . Bu küçük fark, yatay bir kaydırma çubuğu ekler (kullanıcının bu fazladan genişliği görmesi gerekir) ve sonuç olarak, her iki durumda da yükseklik biraz farklı olacaktır.<body>width: 100vw; height: 100vh;width: 100%; height: 100vh;vwwidth: 100vw;width: 100%;

Üst öğe boyutu belge görünüm alanı boyutuyla aynı olsa bile, hangisinin kullanılacağına karar verirken bu dikkate alınmalıdır.

Misal:

Kullanma width:100vw;:

.fullviewport {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100vw;
  height: 20vh;
  background-color: blue;
}

<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

Snippet'i genişlet

Kullanma width:100%;:

.fullviewport {
  width: 100%;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100%;
  height: 20vh;
  background-color: blue;
}

<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

Snippet'i genişlet

— IanC
kaynak

2

CSS body { overflow: hidden }, kaydırma çubuklarının görüntülenmemesine neden olur.

— Dave F

2

Cevabınız ve kod örneğiniz için teşekkür ederiz, @IanC. Bana çok yardımcı oldu. Açıklama: "Kenar çubuğu" yazdığınızda "kaydırma çubuğu" demek istediğinizi düşünüyorum.

Ayrıca yararlı bulduğum kaydırma çubuklarını sayan görünüm birimleri hakkında bazı tartışmalar:

W3C Spec vw, vh, Vmin, Vmax birimleri için ( "görüntü alanı yüzdesi uzunlukları") "Herhangi bir kaydırma çubukları var olmaya değil varsayılır" diyor.

Görünüşe göre Firefox, @ Nolonar'ın Genişlik:% 100 ve genişlik: 100vw arasındaki farktaki yorumu gibi kaydırma çubuğu genişliğini 100vw'den çıkarıyor. gözlemler, "Kullanabilir miyim?"

Kullanabilir miyim , belki de spec (?) İle birlikte, şu anda Firefox dışındaki tüm tarayıcıların "yanlış" olarak 100vw'yi dikey kaydırma çubuğu da dahil olmak üzere tüm sayfa genişliği olarak değerlendirdiğini söylüyor.

— Slack Undertow
kaynak

1

vw (görünüm genişliği) ve vh (görünüm yüksekliği) birimleri, görünüm bağlantı noktası boyutuyla ilişkilidir; burada 100vw veya vh, görünüm bağlantı noktasının genişliğinin / yüksekliğinin% 100'üdür.

Örneğin, bir görünüm bağlantı noktası 1600 piksel genişliğinde ve 2vw olarak bir şey belirtirseniz, bu görünüm bağlantı noktası genişliğinin% 2'sine veya 32 piksel değerine eşit olacaktır.

% birim her zaman geçerli öğenin üst öğe genişliğine dayanır

0

Mutlaka yükseltilmemiş bir fark vardır. 100vw scrool çubuğunun genişliğini içerirken% 100'ü içermez. Küçük bir farktır, ancak tasarım yaparken önemlidir.

1

IanC'nin cevabı öyle. "Görünüm çubuğunun vw hesabı kaydırma alanının bir parçası olduğundan, genişlik: 100vw; genişlikten biraz daha büyük olacaktır:% 100;"

— j08691