2136

Mam układ z dwiema kolumnami - lewą divi prawą div.

Prawa strona divma kolor szary background-colori muszę ją rozwinąć w pionie w zależności od wysokości okna przeglądarki użytkownika. W tej chwili background-colorkończy się na tym ostatni fragment treści div.

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

html css height

— mikrofon
źródło

7

Oby to pytanie było przydatne, stackoverflow.com/questions/1366548/…

— Ivan Nevostruev

Dobra droga, ale wiadomo, że jednostki vh, vw itp. Są wadliwe. Jest taka lekka alternatywa js, jeśli jej potrzebujesz: joaocunha.github.io/vunit

— patrz ostrzejszy

Oto proste i jasne wyjaśnienie heightwłaściwości CSS z wartościami procentowymi: stackoverflow.com/a/31728799/3597276

— Michael Benjamin

4

możesz użyć wysokości: 100vh; własność css

— Vishnu Chauhan

2830

Istnieje kilka jednostek miar CSS 3 o nazwie:

Długości procentowe (lub względne)

Jakie są długości procentowe rzutni?

Z powiązanej rekomendacji dla kandydatów W3 powyżej:

Długości procentowe rzutni są względne do rozmiaru początkowego bloku zawierającego. Gdy wysokość lub szerokość początkowego bloku zawierającego zostanie zmieniona, są one odpowiednio skalowane.

Jednostkami tymi są vh(wysokość rzutni), vw(szerokość rzutni), vmin(minimalna długość rzutni) i vmax(maksymalna długość rzutni).

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

Do tego pytania możemy użyć vh: 1vhjest równe 1% wysokości rzutni. Oznacza to, że 100vhjest 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 dosłownie wszystko, czego potrzeba. Oto przykład tego używanego JSFiddle .

Jakie przeglądarki obsługują te nowe urządzenia?

Jest to obecnie obsługiwane we wszystkich aktualnych głównych przeglądarkach oprócz Opery Mini. Sprawdź Czy mogę użyć ... w celu uzyskania dalszej pomocy.

Jak można tego używać z wieloma kolumnami?

W przypadku pytania, które zawiera lewy i prawy rozdzielacz, oto przykład JSFiddle pokazujący układ dwóch kolumn obejmujący oba vhi vw.

Czym się `100vh`różni `100%`?

Weźmy na przykład ten układ:

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

pZnacznik tutaj jako 100% wzrostu, ale ponieważ jest zawierające divma wysokość pikseli 200, 100% 200 200 pikseli, pikseli, staje się nie 100% w bodywysokości. Użycie 100vhzamiast tego oznacza, że pznacznik będzie miał 100% wysokości bodyniezależnie od divwysokości. Spójrz na towarzyszący JSFiddle, aby łatwo zobaczyć różnicę!

— James Donnelly
źródło

35

Dziwne zachowanie podczas przewijania, gdy element jest faktycznie wyższy niż rzutnia. Kontener zachowuje wysokość rzutni, a zawartość wypływa z niego. min-height:100vhwydaje się, że to działa.

— wdm

8

@DGDD działa na iOS Safari 6+, Android Browser 4.4+, BlackBerry Browser 10.0 i IEMobile 10.0. Nie wiem, do której przeglądarki mobilnej się odwołujesz, ale te 4 stanowią ponad 90% używanych przeglądarek mobilnych. To pytanie nie określa wymagań dotyczących pracy w przeglądarkach mobilnych.

— James Donnelly

1

@ robross0606 ponownie to nie jest pytanie, na które tutaj odpowiedziałem. To zupełnie inne pytanie, na które odpowiedź rzeczywiście korzysta z Flexboksa: stackoverflow.com/questions/90178/…

— James Donnelly

1

@JamesDonnelly Tak, wiem. Ale to nie jest odpowiedź na to pytanie. Wysokość okna przeglądarki obejmuje wysokość paska nawigacyjnego. Byłoby lepiej, ponieważ w przeglądarkach mobilnych wysokość ekranu zmienia się za każdym razem, gdy pasek nawigacyjny pokazuje / ukrywa się.

— RedClover,

3

Alert mobilny: używanie vh mess z Chrome Mobile, który nie uwzględnia paska nawigacyjnego. Następnie pokrywa go górą strony. Poważny problem, jeśli masz tam menu ...

— Offirmo

567

Jeśli chcesz ustawić wysokość elementu <div>lub dowolnego elementu, powinieneś również ustawić wysokość <body>i <html>na 100%. Następnie możesz ustawić wysokość elementu za pomocą 100% :)

Oto przykład:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

— Ariona Rian
źródło

109

Popraw mnie, jeśli się mylę, ale myślę, że musisz również ustawić wysokość dla wszystkich rodziców div, aby faktycznie pracować

— Dany Y

To nie zadziała, jeśli używam ciągłego projektowania: wysokość strony 6000px, z blokami reprezentującymi strony. Chcę, aby jeden blok był dokładnie wysokością rzutni.

— Qwerty,

@DanyY, masz rację. Musisz ustawić wysokość dla wszystkich rodziców div, z implikacjami, że wszystko ma wysokość ekranu. Oto przykład .

— toto_tico

Ta sztuczka działa w niektórych przypadkach, ale w niektórych przypadkach też nie. Jeśli szukasz zgodności lub bardziej zalecanego sposobu, możesz zobaczyć odpowiedź @ Jamesa powyżej :) Używając metody procentowej rzutni :), To też powinno działać. na zdrowie

— Ariona Rian

8

@Qwerty, oto rozwiązanie. Zestaw css jak tak: html { height: 100%*number of blocks; }, body { height: 100%;}, #div { height: 100%/number of blocks; }. Więc jeśli masz 3 sekcje, będzie tohtml { height: 300%; } body { height: 100%; } #div { height: 33.3% }

— cameronjonesweb

283

Jeśli jesteś w stanie absolutnie ustawić swoje elementy,

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

zrobiłbym to.

— Tinister
źródło

16

Działa to poprzez usunięcie elementu z obiegu dokumentu i scementowanie jego dolnej wartości do wysokości jego elementu nadrzędnego. Nie jest to idealne, gdy zawartość przekracza wysokość elementu nadrzędnego.

— Ricky Boyce,

1

To nie działa, gdy jedno z jego rodziców jest ustawione na, position:relativea jego wysokość nie stanowi 100% rzutni. Dopasuje górę i dół do następnego względnego lub absolutnego przodka.

— Seika85

141

Możesz użyć jednostki portu widoku 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 */
}

— MrGeek
źródło

1

@Lamar Powinieneś użyć, * { box-sizing: border-box; }aby temu zapobiec.

— Luca Steeb,

2

Warto sprawdzić caniuse pod kątem obsługi przeglądarki w jednostkach widoku: caniuse.com/#feat=viewport-units

— Dave Everitt

132

W vhtym przypadku możesz użyć wartości odpowiadającej 1% wysokości rzutni ...

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

Spójrz na zdjęcie poniżej, które tutaj rysuję:

Wypróbuj fragment, który dla Ciebie stworzyłem, 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>

Rozwiń fragment kodu

— Alireza
źródło

Podanie 100vh dodało pionowy przewijanie strony, więc podążyłem za tym, ale nie działało. stackoverflow.com/questions/44645465/… . Czy jest jakiś sposób na uniknięcie przewijania w pionie i niech div dotyka dna bez zawartości?

— DILEEP THOMAS,

@DILEEPTHOMAS poszukaj istniejącychpaddings/margins

— Legends

@ Legends w pliku głównym próbowałem podać jako * {margin: 0, padding: 0}, ale nie zadziałało

— DILEEP THOMAS,

1

@DILEEPTHOMAS spójrz na ten przykład dostarczony przez Alireza, ma również pasek przewijania, ponieważ element body ma margines. Po usunięciu marginesu pasek przewijania zniknie. Może to mieć różne przyczyny, ale najpierw sprawdzę ten.

— Legendy

101

Wszystkie pozostałe rozwiązania, w tym jedno z najczęściej wybieranych, vhsą nieoptymalne w porównaniu z rozwiązaniem modelu elastycznego .

Wraz z pojawieniem się modelu elastycznego CSS , rozwiązanie problemu 100% wysokości staje się bardzo, bardzo łatwe: użycie height: 100%; display: flexna flex: 1elemencie macierzystym i elemencie potomnym. Automatycznie zajmą całą dostępną przestrzeń w swoim pojemniku.

Zwróć uwagę, jak proste są znaczniki i CSS. Żadnych hacków na stole ani nic takiego.

Model flex jest obsługiwany 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>

Rozwiń fragment kodu

Dowiedz się więcej o modelu flex tutaj.

— Airen
źródło

3

słowo ostrzeżenia: gdy zawartość jednego z lewych / prawych pojemników przekroczy pierwotną wysokość ciała, przeciwny pojemnik nie zmieni rozmiaru, więc pojemniki mają wtedy różne wysokości.

— schellmax,

1

Przykład problemu, na który wskazuje Schellmax: jsfiddle.net/Arete/b4g0o3pq

— Arete

W zależności od projektu overflow-y: auto;można uniknąć „pojemników przekracza pierwotną wysokość ciała”.

— Evi Song,

54

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

Czy układ ma stałą szerokość?
Czy jedna lub obie kolumny mają stałą szerokość?

Oto jedna z możliwości:

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>

Rozwiń fragment kodu

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 pozycjonowaniem bezwzględnym, ale ogólnie znalazłem lepsze wyniki (szczególnie w zakresie przeglądarki) za pomocą pływaków.

— Cletus
źródło

34

Oto, co zadziałało dla mnie:

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

Rozwiń fragment kodu

Użyj position:fixedzamiast tego w position:absoluteten sposób, nawet jeśli przewiniesz w dół, podział rozwinie się do końca ekranu.

— Majda
źródło

Ten kod z „pozycją: [naprawiony | absolutny]” doskonale nadaje się do tła wyskakujących okienek (na przykład po kliknięciu, aby powiększyć zdjęcie), ale nie jest tak pewny w przypadkach, gdy trzeba przewinąć w dół. Wciąż przydatne ciasto!

— Mannyfatboy

29

Oto poprawka na wysokość.

W swoim CSS użyj:

#your-object: height: 100vh;

W przypadku przeglądarek, które nie obsługują vh-units, użyj modernizatora.

Dodaj ten skrypt (aby dodać wykrywanie 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ść rzutni, #your-objectjeśli przeglądarka nie obsługuje vh-units:

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

— Jonas Sandstedt
źródło

23

100% działa inaczej dla szerokości i wysokości.

Kiedy określisz width: 100%, oznacza to „zabierz 100% dostępnej szerokości z elementu nadrzędnego lub szerokości okna”.

Gdy określisz height: 100%, oznacza to tylko: „zabierz 100% dostępnej wysokości z elementu nadrzędnego”. Oznacza to, że jeśli nie określisz wysokości na elemencie najwyższego poziomu, wysokość wszystkich dzieci będzie wynosić albo 0wysokość rodzica, i dlatego musisz ustawić najwyższy element, aby miał min-heightwysokość okna.

Zawsze określam, że ciało ma mieć minimalną wysokość 100vh, co ułatwia pozycjonowanie i obliczenia,

body {
  min-height: 100vh;
}

— Dinesh Pandiyan
źródło

16

Dodaj min-height: 100%i nie określaj wysokości (lub ustaw na auto). Całkowicie wykonał dla mnie pracę:

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

— Remus Simion
źródło

16

100vw === 100% szerokości rzutni.

100vh === 100% wysokości rzutni.

Jeśli chcesz ustawić divszerokość lub wysokość 100% rozmiaru okna przeglądarki, powinieneś użyć:

Dla szerokości: 100vw

Do wysokości: 100vh

Lub jeśli chcesz ustawić mniejszy rozmiar, użyj calcfunkcji CSS . Przykład:

#example {
    width: calc(100vw - 32px)
}

— Руслан
źródło

12

Istnieje kilka metod ustawiania wysokości od <div>100%.

Metoda (A):

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100%;
  width: 50%;
  background: green;
}
.div-right {
  height: 100%;
  width: 50%;
  background: gray;
}

<div class="div-left"></div>
<div class="div-right"></div>

Rozwiń fragment kodu

Metoda (B) przy użyciu vh:

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100vh;
  width: 50%;
  background: green;
  float: left;
}
.div-right {
  height: 100vh;
  width: 50%;
  background: gray;
  float: right;
}

<div class="div-left"></div>
<div class="div-right"></div>

Rozwiń fragment kodu

Metoda (c) za pomocą Flex Box:

html,
body {
  height: 100%;
  min-height: 100%;
}
.wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}
.div-left {
  width: 50%;
  background: green;
}
.div-right {
  width: 50%;
  background: gray;
}

<div class="wrapper">
  <div class="div-left"></div>
  <div class="div-right"></div>
</div>

Rozwiń fragment kodu

— Santosh Khalse
źródło

12

To działało dla mnie:

html, body {
    height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* Minimum height for a modern browser */
    height:auto !important; /* Important rule for a modern browser */
    height:100%; /* Minimum height for Internet Explorer */
    overflow: hidden !important; /* Firefox scroll-bar */
}

Zaczerpnięte z tej strony .

— testowanie
źródło

12

Najprostszym sposobem jest zrobienie tego w ten sposób.

div {
background: red;
height: 100vh;
}
body {
margin: 0px;
}

<div></div>

Rozwiń fragment kodu

— EMILO
źródło

11

Spróbuj ustawić height:100%w html&body

html, 
body {
    height: 100%;
}

A jeśli chcesz 2 div wysokości to samo użyj lub ustaw display:flexwłaściwość elementu nadrzędnego .

— Mohammed Javed
źródło

9

Mimo wszystkich odpowiedzi tutaj zdziwiłem się, że nikt tak naprawdę nie rozwiązał problemu. Jeśli użyłem 100vh height/ min-height, układ zepsuł się, gdy zawartość była dłuższa niż strona. Jeśli zamiast tego użyłem 100% height/ min-height, układ zepsuł się, gdy zawartość była mniejsza niż wysokość strony.

Rozwiązaniem, które rozwiązałem oba przypadki, było połączenie dwóch pierwszych odpowiedzi:

html, body, #mydiv {
  height: 100%;
  min-height: 100vh;
}

— machineghost
źródło

1

Mam stały pasek nawigacyjny o wysokości 90 pikseli, więc po prostu musiałem zmienić „100vh” na „calc (100vh - 90px)”

— Mark Jackson

8

Wystarczy użyć jednostki „vh” zamiast „px”, co oznacza wysokość portu widokowego.

height: 100vh;

— khalifeh
źródło

7

Elementy blokowe domyślnie zajmują całą szerokość swojego elementu nadrzędnego.

W ten sposób spełniają wymagania projektowe, czyli układanie w stosy w pionie.

9.4.1 Konteksty formatowania bloku

W kontekście formatowania bloków pola są układane jeden po drugim, pionowo, zaczynając od góry zawierającego bloku.

To zachowanie nie rozciąga się jednak na wysokość.

Domyślnie większość elementów ma wysokość ich zawartości ( height: auto).

W przeciwieństwie do szerokości, musisz określić wysokość, jeśli chcesz uzyskać więcej miejsca.

Dlatego pamiętaj o tych dwóch rzeczach:

chyba że chcesz pełnej szerokości, musisz zdefiniować szerokość elementu bloku
chyba że chcesz wysokość zawartości, musisz zdefiniować wysokość elementu

.Contact {
  display: flex;     /* full width by default */
  min-height: 100vh; /* use full height of viewport, at a minimum */
}

.left {
  flex: 0 0 60%;
  background-color: tomato;
}

.right {
  flex: 1;
  background-color: pink;
}

body { margin: 0; } /* remove default margins */

<div class="Contact">
  <section class="left">
    <div class="">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
    </div>
  </section>
  <section class="right">
    <img />
  </section>
</div>

Rozwiń fragment kodu

— Michael Benjamin
źródło

7

Oto coś, co nie jest dokładnie takie, jak w poprzednich odpowiedziach, ale może być pomocne dla niektórych:

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
}

#one {
  background-color: red;
}

#two {
  margin-top: 0px;
  background-color: black;
  color: white;
  overflow-y: scroll;
}

https://jsfiddle.net/newdark/qyxkk558/10/

— newdark-it
źródło

6

Użyj FlexBox CSS

Flexbox idealnie pasuje do tego typu problemów. Choć znany głównie z układania treści w kierunku poziomym, Flexbox działa równie dobrze w przypadku problemów z układem pionowym. Wszystko, co musisz zrobić, to owinąć pionowe sekcje w elastyczny pojemnik i wybrać, które chcesz rozwinąć. Automatycznie zajmą całą dostępną przestrzeń w swoim pojemniku.

— robross0606
źródło

6

Jedną z opcji jest użycie tabeli CSS. Ma doskonałą obsługę przeglądarki, a nawet działa w Internet Explorerze 8.

Przykład JSFiddle

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: table;
  width: 100%;
  height: 100%;
}
.left, .right {
  display: table-cell;
  width: 50%;
}
.right {
  background: grey;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

Rozwiń fragment kodu

— Naklejki
źródło

6

Spróbuj tego - przetestowano:

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}

Edycja: aktualizacja 2020:

Możesz vhteraz użyć :

#right, #left {
  height: 100vh
}

— lukaszkups
źródło

5

Możesz użyć display: flexiheight: 100vh

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

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}

<div class="left">left</div>
<div class="right">right</div>

Rozwiń fragment kodu

— Thuc Nguyen
źródło

Istnieje już kilka opublikowanych rozwiązań Flexbox, w tym jedno z tą dokładną implementacją opublikowane 26 dni przed odpowiedzią.

— TylerH

5

Musisz zrobić dwie rzeczy, jedną jest ustawienie wysokości na 100%, co już zrobiłeś. Drugi to pozycja absolutna. To powinno wystarczyć.

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

Źródło

— Prabhakar Undurthi
źródło

3

Przestarzałe rozwiązanie. Użyj vhzamiast tego.

— lawina 1

1

Nie używaj, vhjeśli planujesz używać responsywnego projektowania na urządzeniach mobilnych.

— Alexander Kim

5

Wypróbuj następujący CSS:

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

— Dziecko sprawiające problemy
źródło

5

W rzeczywistości dla mnie najlepsze było skorzystanie z vhnieruchomości.

W mojej aplikacji React chciałem, aby div dopasowywał stronę wysoko nawet po zmianie rozmiaru. Próbowałem height: 100%;, overflow-y: auto;ale żaden z nich nie działał, gdy ustawienie height:(your percent)vh;działało zgodnie z przeznaczeniem.

Uwaga: jeśli używasz wypełnienia, zaokrąglonych rogów itp., Pamiętaj, aby odjąć te wartości od wartości vhprocentowej właściwości lub doda to dodatkową wysokość i spowoduje wyświetlenie pasków przewijania. Oto moja próbka:

.frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}

— JimmyFlash
źródło

Nawiasem mówiąc, wspominasz o „zaokrąglonych rogach” wpływających na wysokość elementu, spodziewam się, że ustawienie box-sizing: border-box;to przezwycięży, oznacza to, że rozmiar ramki jest również brany pod uwagę przy obliczaniu rozmiaru (szerokości i wysokości) elementu.

— Neek

5

Spróbuj tego raz ...

*{
  padding:0;
  margin:0;
}
.parent_div{
  overflow:hidden;
  clear:both;
  color:#fff;
  text-align:center;
}

.left_div {
  float: left;
  height: 100vh;
  width: 50%;
  background-color: blue;

}

.right_div {
  float: right;
  height: 100vh;
  width: 50%;
  background-color: green;

}

<div class=" parent_div">
  <div class="left_div">Left</div>
  <div class="right_div">Right</div>
</div>

Rozwiń fragment kodu

— Sunil Rajput
źródło

3

Jeśli używasz position: absolute;i jQuery, możesz użyć

$("#mydiv").css("height", $(document).height() + "px");

— John Smith Opcjonalnie
źródło

1

JavaScript nie jest potrzebny. Nowoczesne rozwiązanie polega na zastosowaniu modelu flex box CSS .

— Dan Dascalescu

Jeśli używasz JS, uważam, że jest to całkiem przydatne. UWAGA: najlepiej używać tego z $ (window) .load (), ponieważ różne wyniki będą zwracane za pomocą F5 lub CTRL + F5. Sprawdź ten link, aby uzyskać więcej informacji. stackoverflow.com/questions/13314058/…

— edward,

2

HTML

   // vw: hundredths of the viewport width.
   // vh: hundredths of the viewport height.
   // vmin: hundredths of whichever is smaller, the viewport width or height.
   // vmax: hundredths of whichever is larger, the viewport width or height.

<div class="wrapper">
    <div class="left">
        Left
    </div>
    <div class="right">
        Right
    </div>
</div>

CSS

<style>
    .wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        height: 100vh; // Height window (vh)
    }
    .wrapper .left{
        widht: 80%; // Width optional, but recommended
    }
    .wrapper .right{
        widht: 20%; // Width optional, but recommended
        background-color: #dd1f26;
    }
<style>

— RamNiwas Sharma
źródło

1

Możliwe błędy ortograficzne: widht(pod koniec)

— Peter Mortensen

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

Długości procentowe (lub względne)

Jakie są długości procentowe rzutni?

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

HTML

CSS

Jakie przeglądarki obsługują te nowe urządzenia?

Jak można tego używać z wieloma kolumnami?

Czym się 100vhróżni 100%?

HTML

CSS

Czym się `100vh`różni `100%`?