Soru Tarayıcı penceresinin div% 100 yüksekliği nasıl yapılır?


İki sütunlu bir düzen var - sol div ve bir sağ div.

Doğru div gri background-colorve kullanıcının tarayıcı penceresinin yüksekliğine bağlı olarak dikey olarak genişletmek için ihtiyacım var. Şu an background-color son içerik parçasında biter div.

denedim height:100%, min-height:100%; vb.


1685
2017-10-15 21:18


Menşei


Bu soruyu yararlı bulabilir misiniz stackoverflow.com/questions/1366548/... - Ivan Nevostruev
Gitmek için iyi bir yol, ama vh, vs üniteleri buggy bilinir. İhtiyacınız varsa bu hafif js alternatifi var: joaocunha.github.io/vunit - see sharper
İşte CSS'nin basit ve açık bir açıklaması height yüzde değeri olan mülk: stackoverflow.com/a/31728799/3597276 - Michael_B


Cevaplar:


Aranan birkaç CSS3 ölçü birimi vardır:

Görünüm-Yüzde (veya Viewport-Relative) Uzunlukları

Viewport-Yüzdesi Uzunlukları nedir?

Yukarıdaki bağlantılı W3 Aday Tavsiyesi'nden:

Vizör-yüzde uzunlukları, ilk ihtiva eden bloğun boyutuna göredir. İlk içeren bloğun yüksekliği veya genişliği değiştirildiğinde, buna göre ölçeklendirilir.

Bu birimler vh (viewport yüksekliği), vw (viewport genişliği), vmin (viewport minimum uzunluk) ve vmax (viewport maksimum uzunluk).

Bu, bir ayırıcının tarayıcı boyunu doldurmak için nasıl kullanılabilir?

Bu soru için, vh: 1vh viewport'un yüksekliğinin% 1'ine eşittir. Demek ki, 100vh öğenin DOM ağacında nerede bulunduğundan bağımsız olarak tarayıcı penceresinin yüksekliğine eşittir:

HTML

<div></div>

CSS

div {
    height:100vh;
}

Bu tam anlamıyla gerekli olan her şey. Burada bir JSFiddle örneği Bu kullanımda.

Hangi yeni tarayıcılar bu yeni birimleri destekliyor?

Bu şu anda Opera Mini'nin dışındaki tüm güncel tarayıcılarda desteklenmektedir. Çıkış yapmak Kullanabilirmiyim... Daha fazla destek için.

Bu çoklu sütunlarla nasıl kullanılabilir?

Eldeki soruda, sol ve sağ bölücü olan, burada bir JSFiddle örneği her ikisini de içeren iki sütunlu bir düzeni gösterme vh ve vw.

Nasıl 100vh farklı 100%?

Bu düzeni örneğin alın:

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

p Buradaki etiket% 100 yüksekliğe ayarlıdır, ancak içerdiği için div 200px yüksekliğe sahip, 200px'in% 100'ü 200 piksele ulaşıyor, değil % 100 body yükseklik. kullanma 100vh bunun yerine p etiketi% 100 yükseklik olacak body ne olursa olsun div yükseklik. Şuna bir bak beraberindeki JSFiddle farkı kolayca görmek için!


2371
2018-05-30 13:33



Çok üzücü yapmak, bunu calc () ile birlikte kullanamayacağımı düşünüyorum. Eğer elemanımın sınırları varsa, height: calc(100vh - 2px); - Langdon
Öğe gerçekten görünümden daha uzun olduğunda kaydırma ile garip davranış. Kap, görünüm yüksekliğini korur ve içerik kaptan dışarı akar. min-height:100vh Bu etrafında çalışmak gibi görünüyor. - wdm
@DGDD bu, iOS Safari 6+, Android Browser 4.4+, BlackBerry Tarayıcı 10.0 ve IEMobile 10.0'da çalışır. Hangi mobil tarayıcıya başvurduğunuzu bilmiyorum, ancak bu 4 mobil tarayıcıların% 90'ından fazlasını oluşturuyor. Bu soru, mobil tarayıcılarda çalışmak için bir gereksinim belirtmiyor. - James Donnelly
@ robross0606 yine burada cevapladığım bir soru değil. Bu tamamen farklı bir soru, cevabı gerçekten de esnek bir kutu kullanıyor: stackoverflow.com/questions/90178/... - James Donnelly
test edebileceğimiz gibi tüm cep telefonlarında yok - Daniel Rodriguez


Bir yüksekliğini ayarlamak istiyorsanız <div> veya herhangi bir elemanın yüksekliğini ayarlamanız gerekir <body> ve <html> % 100'e kadar. Sonra elemanın yüksekliğini% 100 ile ayarlayabilirsiniz :)

İşte bir örnek:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

522
2017-12-11 13:10



Bu IE 8'de çalışmıyor. - TreK
Eğer yanılıyorsam beni düzeltin, ama sanırım gerçekten de işe yaramak için divun tüm ebeveynlerine boyunu ayarlamanız gerekiyor. - Dany Y
Bu şaşırtıcı değil. Bu çok üzücü. (HTML hakkında değil cevabı konuşuyor) - Den
Devam eden tasarım kullanıyorum ise bu işe yaramaz: Sayfaları temsil eden bloklar ile sayfa 6000px yükseklik. Bir bloğun tam olarak viewport'un yüksekliği olmasını istiyorum. - Qwerty
@Qwerty, işte çözüm. Css'yi şöyle ayarlayın: html { height: 100%*number of blocks; }, body { height: 100%;}, #div { height: 100%/number of blocks; }. Yani 3 bölümünüz varsa html { height: 300%; } body { height: 100%; } #div { height: 33.3% } - cameronjonesweb


Öğelerinizi kesinlikle konumlandırabiliyorsanız,

position: absolute;
top: 0;
bottom: 0;

yapardı.


242
2017-10-15 21:31



Bu, öğeyi belge akışından alarak ve alt değerini üst öğesinin yüksekliğine getirerek çalışır. İçeriğiniz ebeveyninin yüksekliğini aştığında bu ideal değildir. - Ricky Boyce
Bunu denedim, bu harika, ama sonra mutlak konumlandırmayla, marjı [yatay | sol]: yatay olarak yatay olarak merkezleyemezsiniz - Petruza
Bu harika bir çözüm. Yorum yaptıktan sonra, #Petruza ile aynı marjda sol ve sağda sorun yaşıyordum, bu yüzden aşağıdakileri ekledim: body {color: # 004A6E; pozisyon: mutlak; üst: 0; alt: 0; sol: 0; sağa: 0; } - Kremena Lalova
Bu, ebeveynlerinden biri ayarlandığında işe yaramaz. position:relative ve yüksekliği, görünümün% 100'ü değildir. Bir sonraki akraba veya mutlak ataya yukarı ve aşağı ayarlayacaktır. - Seika85
Bu size vücut ve html yüksekliğini% 100 almak için söylüyorum daha iyi çalışır - dave o grady


Görüntüleme noktası birimini CSS'de kullanabilirsiniz:

HTML:

<div id="my-div">Hello World!</div>

CSS:

#my-div {
    height:100vh; /*vh stands for view-port height, 1vh is 1% of screen height*/
}

129
2018-05-04 11:11



Dolgu ile nasıl çalışır? # my-div'a dolgu eklediğimde, görünüm portundan daha büyük olur. - Lamar
@Lamar Kullanmalısınız * { box-sizing: border-box; } bunu önlemek için. - Luca Steeb
Viewport birimlerinde tarayıcı desteği için caniuse kontrolü: caniuse.com/#feat=viewport-units - Dave Everitt
ie9 gibi tüm tarayıcılarda iyi çalışır gibi görünüyor - luky
Bu, iOS Safari'de işe yaramıyor ve Apple'ın bunu benimseme niyetinde olmadığından vh esasen değersiz hale geliyor. - 3Dom


En çok oy alan vh ile karşılaştırıldığında sub-optimal esnek model çözüm.

Gelişiyle CSS flex modeli% 100 yükseklik problemini çözmek çok, çok kolay hale geliyor: height: 100%; display: flexebeveyn üzerinde ve flex: 1 Çocuk elemanları üzerinde. Kaplarındaki tüm boş alanları otomatik olarak alırlar.

İşaretlemenin ve CSS'nin ne kadar basit olduğuna dikkat edin. Masa ya da başka bir şey yok.

Esnek modeli tüm önemli tarayıcılar tarafından desteklenir yanı sıra IE11 +.

html, body {
  height: 100%;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}
<div class="left">left</div>
<div class="right">right</div>

Hakkında daha fazla bilgi edinin esnek model İşte.


86
2018-06-12 14:14



bir uyarı kelimesi: sol / sağ kaplardan birinin içeriği orijinal gövde yüksekliğini aştığında, karşıt konteyner yeniden boyutlandırılmaz, böylece kaplar farklı yüksekliklere sahip olur. - schellmax
Schellmax probleminin örneği şöyle: jsfiddle.net/Arete/b4g0o3pq - Arete


Aşağıdaki gibi birkaç önemli ayrıntıdan bahsetmiyorsunuz:

  • Düzen sabit genişlikli mi?
  • Sütunların ikisi ya da ikisi sabit genişlikte mi?

İşte bir olasılık:

body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

html,
body,
#wrapper,
#left,
#right {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  overflow: hidden;
  width: 960px; // width optional
}

#left {
  background: yellow;
  float: left;
  width: 360px; // width optional but recommended 
}

#right {
  background: grey;
  margin-left: 360px; // must agree with previous width 
}
<html>
<head>
  <title>Example</title>
</head>

<body>
  <div id="wrapper">
    <div id="left">
      Left
    </div>

    <div id="right"></div>
  </div>
</body>

</html>

Hangi kolonların sabitlenmesi gerektiğine ve sıvıya bağlı olarak bunun üzerinde birçok varyasyon vardır. Bunu mutlak konumlandırma ile de yapabilirsiniz, ancak genellikle daha iyi sonuçlar buldum (özellikle tarayıcılar açısından).


48
2017-10-15 23:13





Kullanabilirsiniz vh bu durumda göreceli olan Yüksekliğin% 1'i görünümün

Bu, yüksekliği kapatmak istiyorsanız, sadece 100vh.

Burada çizdiğim resme bakın:

How to make a div 100% height of the browser window?

Sizin için oluşturduğum snippet'i aşağıdaki gibi deneyin:

.left {
  height: 100vh;
  width: 50%;
  background-color: grey;
  float: left;
}

.right {
  height: 100vh;
  width: 50%;
  background-color: red;
  float: right;
}
<div class="left"></div>
<div class="right"></div>


41
2018-06-03 17:43



% 100 genişlik ve yüksekliğin ötesine geçtiyse ne olur ne olur ne olur? 100 sütun ve 1000 satırlık bir tablo söyleyelim - PirateApp


İşte yükseklik için bir düzeltme.

CSS kullanımınızda:

#your-object: height: 100vh;

Desteklemeyen tarayıcı için vh-units, modernizr kullanın.

Bu komut dosyasını ekleyin ( vh-units)

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {   
        var height = parseInt(window.innerHeight/2,10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"],10);

        bool= !!(compStyle == height);
    });
    return bool;
});

Son olarak, viewport'un yüksekliğini eklemek için bu işlevi kullanın. #your-object tarayıcı desteklemiyorsa vh-units:

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});

26
2017-08-21 16:57