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:
HtmlCssYükseklikHeight

AYNI ETİKETTEKİ VİDEOLAR

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • SamsTech

    SamsTech

    4 NİSAN 2014
  • STITCHLESS TV how to sew your own style tutorials

    STITCHLESS T

    9 HAZİRAN 2011
  • Titan Lee Hai

    Titan Lee Ha

    14 Temmuz 2008

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR