SORU
15 EKİM 2009, PERŞEMBE


Div tarayıcı penceresinin 100% yükseklik

İki sütun - sol div ve bir div ile bir düzeni var.

div background-color ve dikey olarak genişletmek istiyorum gri kullanıcının tarayıcı penceresinin yüksekliği bağlı olarak, hakkına sahiptir. Şu anda background-color div içeriği son parçası biter.

,** *10 *9 vb denedim.

CEVAP
30 Mayıs 2013, PERŞEMBE


Nispeten yeni CSS3 ölçü birimleri denilen bir çift vardır:

Viewport-Percentage (or Viewport-Relative) Lengths

-Yüzde görünüm penceresi Uzunlukları nelerdir?

Bağlantılı A3 adaydan Öneri yukarıda:

Görünüm penceresi-yüzde uzunlukları ilk taşıyıcı blok büyüklüğüne göredir. İlk taşıyıcı blok yüksekliği veya genişliği değiştiğinde, buna göre ölçekli.

Bu birimler vh (görünüm penceresi yükseklik) vw (görünüm penceresi genişliği), vmin (görünüm penceresi uzunluk) ve vmax (görüntü kutusu maksimum uzunluk).

Bu nasıl bir bölücü tarayıcı yüksekliği doldurmak için kullanılabilir mi?

Bu soru için, vh kullanabiliriz: 1vh görüş yüksekliği 1'e eşit olur. Bu, 100vh tarayıcı penceresinin yüksekliği eşittir, elemanın DOM ağacında yer neresi olursa olsun demek için:

HTML

<div></div>

CSS

div {
    height:100vh;
}

Bu kelimenin tam anlamıyla gerekli olan şeydir. İşte bu JSFiddle example.

Tarayıcılar bu yeni birimler ne desteği?

Bu şu anda Opera Mini ve Android Tarayıcı güncelliğini tüm büyük tarayıcılar dışında desteklenir. Daha fazla destek için Can I use... Check out.

Nasıl bu birden çok sütun ile kullanılabilir mi?

Eldeki soru, bir sol, wild ve doğru bir bölücü durumunda, burada JSFiddle example gösterilen iki sütun düzeni vh vw de dahil.

Nasıl 100vh 100% farklı?

Örneğin: bu düzen

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

Burada div içeren 200px yükseklik, 100% 200px olduğundan 100% yükseklik ayarlı, ama p etiketi 200px, bir hale dönüşüyordeğilbody yüksekliği 100%. Bunun yerine 100vh p etiketi body ne olursa olsun div yüksekliği 100% yükseklik anlamına gelir. accompanying Fiddle şuna bir bak kolayca farkı görün!

Tam olarak nedir vmin vmax?

1vmin 1vh 1vw arasındaki en küçük değeri kabul eder.
1vmax 1vh 1vw arasındaki en büyük değeri kabul eder.

font-size için de kullanılabilir.

*Bu CSS3 birimleri Firefox dinamik unutmayın, ama diğer tarayıcılar sayfayı yenilemeyi gerektirir.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Matthew Morrill

    Matthew Morr

    15 EKİM 2011
  • Modus Recordings

    Modus Record

    26 Kasım 2008
  • sebsebdouze

    sebsebdouze

    7 ŞUBAT 2008