Pytanie Jak zrobić div 100% wysokości okna przeglądarki?


Mam układ z dwiema kolumnami - po lewej div i prawo div.

Prawo div ma szary kolor background-color, i potrzebuję go do rozwinięcia w pionie w zależności od wysokości okna przeglądarki użytkownika. Właśnie teraz background-color kończy się na ostatniej części treści w tym div.

próbowałem height:100%, min-height:100%; itp.


1685
2017-10-15 21:18


pochodzenie


Może ci się przydać to pytanie stackoverflow.com/questions/1366548/... - Ivan Nevostruev
Dobry sposób na to, ale vh, vw itp. Jednostki są znane z błędów. Jest taka lekka alternatywa Js, jeśli jej potrzebujesz: joaocunha.github.io/vunit - see sharper
Oto proste i jasne wyjaśnienie CSS height właściwość z wartościami procentowymi: stackoverflow.com/a/31728799/3597276 - Michael_B


Odpowiedzi:


Istnieje kilka jednostek pomiarowych CSS3 nazwanych:

Procent rzutni (lub Viewpor-Relative) Długości

Co to są długości procentowe rzutni?

Od powyższej rekomendacji W3 Candidate:

Procentowe wartości procentowe odnoszą się do rozmiaru początkowego bloku zawierającego. Gdy wysokość lub szerokość początkowego bloku zawierającego zostanie zmieniona, zostaną odpowiednio przeskalowane.

Te jednostki są vh (wysokość rzutni), vw (szerokość rzutni), vmin (minimalna długość widocznego obszaru) i vmax (maksymalna długość okna).

Jak można tego użyć, aby dzielnik wypełnił wysokość przeglądarki?

Na to pytanie możemy skorzystać vh: 1vh jest równy 1% wysokości rzutni. To jest do powiedzenia, 100vh jest równa wysokości okna przeglądarki, niezależnie od tego, gdzie element znajduje się w drzewie DOM:

HTML

<div></div>

CSS

div {
    height:100vh;
}

To jest dosłownie wszystko, co potrzebne. Tutaj jest Przykład JSFiddle z tego w użyciu.

Jakie przeglądarki obsługują te nowe jednostki?

Jest to obecnie obsługiwane we wszystkich nowoczesnych przeglądarkach oprócz Opera Mini. Sprawdzić Mogę uzyć... dla dalszego wsparcia.

Jak można tego użyć w wielu kolumnach?

W przypadku danego pytania, z lewej i prawej rozdzielacz, tutaj jest Przykład JSFiddle pokazano układ dwukolumnowy obejmujący oba vh i vw.

Jak jest 100vh inny od 100%?

Weź ten układ na przykład:

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

The p znacznik tutaj jest ustawiony na 100% wysokości, ale dlatego, że zawiera div ma 200px wysokości, 100% z 200px zmienia się w 200px, nie 100% body wysokość. Za pomocą 100vh zamiast tego oznacza, że p tag będzie miał 100% wysokości body niezależnie od div wysokość. Popatrz na to towarzyszący JSFiddle aby łatwo zobaczyć różnicę!


2371
2018-05-30 13:33



Bardzo smutne, że nie mogę tego użyć w połączeniu z Calc (). Jakby mój element miał granice, height: calc(100vh - 2px); - Langdon
Dziwne zachowanie przy przewijaniu, gdy element jest rzeczywiście wyższy niż obszar ekranu. Kontener zachowuje wysokość widoku, a treść wypływa z pojemnika. min-height:100vh wydaje się to obejść. - wdm
@DGDD działa na iOS Safari 6+, Android Browser 4.4+, BlackBerry Browser 10.0 i IEMobile 10.0. Nie wiem, której przeglądarki mobilnej używasz, ale te 4 stanowią ponad 90% używanych przeglądarek mobilnych. To pytanie nie określa wymogu pracy z przeglądarkami mobilnymi. - James Donnelly
@ robross0606 ponownie, to nie jest pytanie, na które tutaj odpowiedziałem. To zupełnie inne pytanie, którego odpowiedź rzeczywiście używa flexbox: stackoverflow.com/questions/90178/... - James Donnelly
vh nie działa na wszystkich telefonach komórkowych, co mogłem przetestować - Daniel Rodriguez


Jeśli chcesz ustawić wysokość a <div> lub dowolny element, należy ustawić wysokość <body> i <html> do 100% też. Następnie możesz ustawić wysokość elementu na 100% :)

Oto przykład:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

522
2017-12-11 13:10



To nie działa w IE 8. - TreK
Popraw mnie, jeśli się mylę, ale myślę, że musisz także ustawić wysokość dla wszystkich rodziców div, aby faktycznie pracować - Dany Y
To nie jest niesamowite. To jest bardzo smutne. (mówienie o HTML nie jest odpowiedzią) - Den
To nie zadziała, jeśli używam ciągłego projektu: strona 6000px wysokość, z blokami reprezentującymi strony. Chcę, aby jeden blok był dokładnie wysokością rzutni. - Qwerty
@QWerty, oto rozwiązanie. Ustaw css jako: html { height: 100%*number of blocks; }, body { height: 100%;}, #div { height: 100%/number of blocks; }. Więc jeśli masz 3 sekcje, będzie html { height: 300%; } body { height: 100%; } #div { height: 33.3% } - cameronjonesweb


Jeśli jesteś w stanie całkowicie ustawić swoje elementy,

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

zrobi to.


242
2017-10-15 21:31



Działa to przez wyjęcie elementu z przepływu dokumentów i utrwalenie jego dolnej wartości do wysokości jego obiektu nadrzędnego. Nie jest to idealne, gdy twoja zawartość przekracza wysokość jej rodzica. - Ricky Boyce
Próbowałem tego, jest świetny, ale z absolutnym pozycjonowaniem nie można wyśrodkować w poziomie z marginesem- [left | right]: auto - Petruza
To świetne rozwiązanie. Po komentarzu, takim samym jak #Petruza i miałem kłopoty z marginesem po lewej i prawej, więc skończyłem dodając następujące: body {color: # 004A6E; pozycja: absolutna; top: 0; dół: 0; lewo: 0; prawe: 0; } - Kremena Lalova
To nie działa, gdy jest ustawiony jeden z jego rodziców position:relative a jego wysokość nie jest równa 100% widoczności. Dostosuje górną i dolną część do następnego względnego lub absolutnego przodka. - Seika85
Dziękuję, że działa to lepiej niż mówienie ciału i html do wzniesienia się w 100% - dave o grady


Możesz użyć jednostki widoku-portu w CSS:

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



Jak to działa z paddingiem? kiedy dodaję padding do # my-div, staje się większy niż port widoku. - Lamar
@Lamar Powinieneś użyć * { box-sizing: border-box; } aby temu zapobiec. - Luca Steeb
Warto sprawdzić zawartość dla obsługi przeglądarki w jednostkach rzutni: caniuse.com/#feat=viewport-units - Dave Everitt
działa dobrze we wszystkich przeglądarkach nawet w ie9 - luky
To nie działa w Safari na iOS, czyniąc vh zasadniczo bezwartościowym, ponieważ Apple nie ma zamiaru go adoptować. - 3Dom


Wszystkie inne rozwiązania, w tym najlepiej odgadnięte z vh są nieoptymalne w porównaniu do model flex rozwiązanie.

Wraz z nadejściem Model flex CSS, rozwiązanie problemu z wysokością 100% staje się bardzo, bardzo łatwe: użyj height: 100%; display: flexna rodzica, oraz flex: 1 na elementach potomnych. Automatycznie zajmą całą dostępną przestrzeń w swoim kontenerze.

Zwróć uwagę, jak prosty jest znacznik i kod CSS. Bez hacków stołowych czy czegokolwiek.

Model elastyczny to obsługiwane przez wszystkie główne przeglądarki a także 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>

Dowiedz się więcej o model flex tutaj.


86
2018-06-12 14:14



słowo ostrzeżenia: gdy zawartość jednego z pojemników po lewej / prawej stronie przekracza pierwotną wysokość ciała, przeciwległy pojemnik nie zostanie zmieniony, więc pojemniki kończą się wtedy różnymi wysokościami. - schellmax
Przykład problemu Schellmax wskazuje: jsfiddle.net/Arete/b4g0o3pq - Arete


Nie wspominasz o kilku ważnych szczegółach, takich jak:

  • Czy szerokość układu jest stała?
  • Czy jedna lub obie kolumny mają ustaloną szerokość?

Oto jedna możliwość:

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>

Istnieje wiele odmian tego, w zależności od tego, które kolumny należy naprawić, a które są płynne. Możesz to zrobić również z absolutnym pozycjonowaniem, ale generalnie znalazłem lepsze wyniki (szczególnie w kategoriach różnych przeglądarek), używając zamiast tego floats.


48
2017-10-15 23:13





Możesz użyć vh w tym przypadku, który jest w stosunku do 1% wysokości z rzutni.

Oznacza to, że jeśli chcesz pokryć wysokość, po prostu użyj 100vh.

Spójrz na obrazek, który tu rysuję:

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

Wypróbuj utworzony przez Ciebie fragment, jak poniżej:

.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



przegłosowano i co się stanie, jeśli zawartość przekroczy 100% szerokości i wysokości, powiedzmy tabelę z 100 kolumnami i 1000 wierszy - PirateApp


Oto poprawka na wysokość.

W twoim CSS użyj:

#your-object: height: 100vh;

Dla przeglądarki, która nie obsługuje vh-units, użyj modernizr.

Dodaj ten skrypt (aby dodać wykrywanie dla 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;
});

Na koniec użyj tej funkcji, aby dodać wysokość widoku do #your-object jeśli przeglądarka nie obsługuje vh-units:

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

26
2017-08-21 16:57





To właśnie dla mnie zadziałało:

<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px;"> </div>

Posługiwać się position:fixed zamiast position:absolutew ten sposób nawet po przewinięciu podział powiększy się do końca ekranu.


25
2017-07-27 16:18



Jest to idealne rozwiązanie, jeśli chcesz objąć całą stronę poza początkowym rzutni. Dobra odpowiedź! - Kinburn101


Dodaj min-height: 100% i nie określaj wysokości (lub włącz ją automatycznie). To całkowicie wykonało zadanie dla mnie:

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}

14
2017-12-10 21:34