2139

Ich habe ein Layout mit zwei Spalten - eine linke divund eine rechte div.

Das rechte divist grau background-colorund muss vertikal erweitert werden, abhängig von der Höhe des Browserfensters des Benutzers. Im Moment background-colorendet das mit dem letzten Inhalt div.

Ich habe versucht height:100%, min-height:100%;etc.

html css height

— Mike
quelle

7

Mögen Sie diese Frage nützlich finden. Stackoverflow.com/questions/1366548/…

— Ivan Nevostruev

Guter Weg, aber vh, vw usw. Einheiten sind bekanntermaßen fehlerhaft. Es gibt diese leichte js-Alternative, wenn Sie sie brauchen: joaocunha.github.io/vunit

— siehe schärfer

Hier ist eine einfache und klare Erklärung der CSS- heightEigenschaft mit Prozentwerten: stackoverflow.com/a/31728799/3597276

— Michael Benjamin

4

Sie können Höhe verwenden: 100vh; CSS-Eigenschaft

— Vishnu Chauhan

2833

Es gibt einige CSS 3-Maßeinheiten mit den Namen:

Viewport-Percentage (oder Viewport-Relative) Längen

Was sind die prozentualen Längen des Ansichtsfensters?

Aus der oben verlinkten W3-Kandidatenempfehlung:

Die prozentualen Längen des Ansichtsfensters beziehen sich auf die Größe des anfänglichen enthaltenden Blocks. Wenn die Höhe oder Breite des anfänglich enthaltenen Blocks geändert wird, werden sie entsprechend skaliert.

Diese Einheiten sind vh(Ansichtsfensterhöhe), vw(Ansichtsfensterbreite), vmin(minimale Länge des Ansichtsfensters) und vmax(maximale Länge des Ansichtsfensters).

Wie kann ein Teiler die Höhe des Browsers ausfüllen?

Für diese Frage können wir Folgendes verwenden vh: 1vhentspricht 1% der Höhe des Ansichtsfensters. Das heißt, 100vhentspricht der Höhe des Browserfensters, unabhängig davon, wo sich das Element im DOM-Baum befindet:

HTML

<div></div>

CSS

div {
    height: 100vh;
}

Dies ist buchstäblich alles, was benötigt wird. Hier ist ein JSFiddle-Beispiel dafür.

Welche Browser unterstützen diese neuen Geräte?

Dies wird derzeit von allen aktuellen Hauptbrowsern außer Opera Mini unterstützt. Check out Kann ich ... für weitere Unterstützung verwenden.

Wie kann dies mit mehreren Spalten verwendet werden?

Im Fall der vorliegenden Frage mit einem linken und einem rechten Teiler sehen Sie hier ein JSFiddle-Beispiel, das ein zweispaltiges Layout zeigt, das sowohl vhals als auch umfasst vw.

Wie ist `100vh`anders als `100%`?

Nehmen Sie dieses Layout zum Beispiel:

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

Das pTag ist hier auf 100% Höhe eingestellt, aber da sein Inhalt div200 Pixel Höhe hat, werden 100% von 200 Pixel zu 200 Pixel, nicht zu 100% der bodyHöhe. Die Verwendung von 100vhstattdessen bedeutet, dass das pTag bodyunabhängig von der divHöhe 100% der Höhe des Tags entspricht . Schauen Sie sich diese begleitende JSFiddle an, um den Unterschied leicht zu erkennen!

— James Donnelly
quelle

35

Seltsames Verhalten beim Scrollen, wenn das Element tatsächlich größer als das Ansichtsfenster ist. Der Container behält die Höhe des Ansichtsfensters bei und der Inhalt fließt aus dem Container heraus. min-height:100vhscheint das zu umgehen.

— Wdm

8

@DGDD Dies funktioniert unter iOS Safari 6+, Android Browser 4.4+, BlackBerry Browser 10.0 und IEMobile 10.0. Ich weiß nicht, auf welchen mobilen Browser Sie sich beziehen, aber diese 4 machen über 90% der verwendeten mobilen Browser aus. Diese Frage legt keine Anforderung für die Arbeit mit mobilen Browsern fest.

— James Donnelly

1

@ robross0606 nochmal das ist nicht die frage die ich hier beantwortet habe. Das ist eine ganz andere Frage, deren Antwort tatsächlich Flexbox verwendet: stackoverflow.com/questions/90178/…

— James Donnelly

1

@ JamesDonnelly Ja, ich weiß. Aber das ist nicht die Antwort auf diese Frage. Die Höhe des Browserfensters umfasst die Höhe der Navigationsleiste. Dies wäre besser, da sich in mobilen Browsern die Höhe des Ansichtsfensters jedes Mal ändert, wenn die Navigationsleiste angezeigt / ausgeblendet wird.

— RedClover

3

Mobile Warnung: Verwenden von vh mess mit Chrome Mobile, bei dem die Navigationsleiste nicht berücksichtigt wird. Es bedeckt dann den oberen Rand Ihrer Seite damit. Ein ernstes Problem, wenn Sie dort ein Menü haben ...

— Offirmo

568

Wenn Sie die Höhe eines <div>oder eines Elements festlegen möchten , sollten Sie auch die Höhe von <body>und <html>auf 100% festlegen . Dann können Sie die Höhe des Elements mit 100% einstellen :)

Hier ist ein Beispiel:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

— Ariona Rian
quelle

109

Korrigieren Sie mich, wenn ich falsch liege, aber ich denke, Sie müssen auch die Höhe auf alle Eltern des Div einstellen, um tatsächlich zu arbeiten

— Dany Y

Dies funktioniert nicht, wenn ich fortlaufendes Design verwende: Seite 6000px Höhe, mit Blöcken, die Seiten darstellen. Ich möchte, dass ein Block genau der Höhe des Ansichtsfensters entspricht.

— Qwerty

@DanyY, du hast recht. Sie müssen die Höhe auf alle Eltern des Div einstellen, mit den Auswirkungen, dass alles die Höhe des Bildschirms hat. Hier ist ein Beispiel .

— toto_tico

Dieser Trick funktioniert in einigen Fällen, in einigen Fällen jedoch auch nicht. Wenn Sie nach Kompatibilität oder einer empfohlenen Methode suchen, können Sie die Antwort von @ James oben anzeigen :) Verwenden der Viewport Percentage-Methode :), das sollte auch funktionieren. prost

— Ariona Rian

8

@ Qwerty, hier ist die Lösung. Set CSS als so: html { height: 100%*number of blocks; }, body { height: 100%;}, #div { height: 100%/number of blocks; }. Also, wenn Sie 3 Abschnitte haben, wird es seinhtml { height: 300%; } body { height: 100%; } #div { height: 33.3% }

— Cameronjonesweb

283

Wenn Sie Ihre Elemente absolut positionieren können,

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

würde es tun.

— Tinister
quelle

16

Dies funktioniert, indem das Element aus dem Dokumentenfluss entfernt und sein unterer Wert auf die Höhe des übergeordneten Elements geklebt wird. Dies ist nicht ideal, wenn Ihr Inhalt die Höhe des übergeordneten Inhalts überschreitet.

— Ricky Boyce

1

Das funktioniert nicht, wenn einer seiner Elternteile eingestellt ist position:relativeund seine Höhe nicht 100% des Ansichtsfensters beträgt. Es wird oben und unten an den nächsten relativen oder absoluten Vorfahren angepasst.

— Seika85

141

Sie können die View-Port-Einheit in CSS verwenden:

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
quelle

1

@ Lamar Sie sollten verwenden * { box-sizing: border-box; }, um dies zu verhindern.

— Luca Steeb

2

Es lohnt sich, caniuse auf Browserunterstützung für Ansichtsfenstereinheiten zu überprüfen

— Dave Everitt

133

Sie können vhin diesem Fall verwenden, was relativ zu 1% der Höhe des Ansichtsfensters ist ...

Das heißt, wenn Sie die Höhe abdecken möchten, verwenden Sie einfach 100vh.

Schauen Sie sich das Bild unten an, das ich hier für Sie zeichne:

Probieren Sie das folgende Snippet aus, das ich für Sie erstellt habe:

.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>

Erweitern Sie das Snippet

— Alireza
quelle

Wenn Sie 100vh geben, wird eine vertikale Schriftrolle für die Seite hinzugefügt, also folgte diese, funktionierte aber nicht. stackoverflow.com/questions/44645465/… . Gibt es eine Möglichkeit, die vertikale Schriftrolle zu vermeiden und das Div den Boden ohne Inhalt berühren zu lassen?

— DILEEP THOMAS

@ DILEEPTHOMAS suchen nach vorhandenenpaddings/margins

— Legenden

@Legends an der Root-Datei Ich habe versucht, als * {margin: 0, padding: 0} zu geben, aber es hat nicht funktioniert

— DILEEP THOMAS

1

@DILEEPTHOMAS Schauen Sie sich dieses Beispiel von Alireza an. Es hat auch eine Bildlaufleiste, da das Körperelement einen Rand hat. Wenn Sie den Rand entfernen, ist die Bildlaufleiste nicht mehr vorhanden. Es kann verschiedene Ursachen haben, aber diese würde ich zuerst auschecken.

— Legenden

102

Alle anderen Lösungen, einschließlich der am besten bewerteten mit, vhsind im Vergleich zur Flex-Modelllösung nicht optimal .

Mit dem Aufkommen des CSS-Flex-Modells wird die Lösung des Problems der 100% -Höhe sehr, sehr einfach: Verwendung height: 100%; display: flexfür die übergeordneten und flex: 1die untergeordneten Elemente. Sie belegen automatisch den gesamten verfügbaren Platz in ihrem Container.

Beachten Sie, wie einfach das Markup und das CSS sind. Keine Tischhacks oder so.

Das Flex-Modell wird von allen gängigen Browsern sowie von IE11 + unterstützt.

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>

Erweitern Sie das Snippet

Erfahren Sie hier mehr über das Flex-Modell .

— Airen
quelle

3

Ein Wort der Warnung: Wenn der Inhalt eines der linken / rechten Behälter die ursprüngliche Körpergröße überschreitet, wird die Größe des gegenüberliegenden Behälters nicht geändert, sodass die Behälter unterschiedliche Höhen haben.

— schellmax

1

Beispiel für das Problem Schellmax weist darauf hin: jsfiddle.net/Arete/b4g0o3pq

— Arete

Je nach Ausführung overflow-y: auto;kann vermieden werden , dass "Behälter die ursprüngliche Körpergröße überschreiten".

— Evi Song

54

Sie erwähnen nicht einige wichtige Details wie:

Ist das Layout feste Breite?
Haben eine oder beide Spalten eine feste Breite?

Hier ist eine Möglichkeit:

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>

Erweitern Sie das Snippet

Dies hängt davon ab, welche Säulen fixiert werden müssen und welche flüssig sind. Sie können dies auch mit absoluter Positionierung tun, aber ich habe im Allgemeinen bessere Ergebnisse (insbesondere in Bezug auf Cross-Browser) mit Floats erzielt.

— Cletus
quelle

34

Das hat bei mir funktioniert:

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

Erweitern Sie das Snippet

Verwenden Sie position:fixedstattdessen auf position:absolutediese Weise, auch wenn Sie nach unten scrollen, wird die Unterteilung bis zum Ende des Bildschirms erweitert.

— Majda
quelle

Dieser Code mit der "Position: [fest | absolut]" eignet sich hervorragend für die Hintergründe von Popups (z. B. wenn Sie zum Zoomen eines Bildes klicken), ist jedoch in den Fällen, in denen Sie tatsächlich nach unten scrollen müssen, nicht so sicher. Immer noch nützlicher Teig!

— Mannyfatboy

29

Hier ist ein Fix für die Höhe.

Verwenden Sie in Ihrem CSS:

#your-object: height: 100vh;

vh-unitsVerwenden Sie für Browser, die dies nicht unterstützen , modernizr.

Fügen Sie dieses Skript hinzu (um die Erkennung für hinzuzufügen 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;
});

Verwenden Sie diese Funktion schließlich, um die Höhe des Ansichtsfensters hinzuzufügen, #your-objectwenn der Browser dies nicht unterstützt vh-units:

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

— Jonas Sandstedt
quelle

23

100% funktioniert unterschiedlich für Breite und Höhe.

Wenn Sie angeben width: 100%, bedeutet dies "100% der verfügbaren Breite vom übergeordneten Element oder der Breite des Fensters übernehmen".

Wenn Sie angeben height: 100%, bedeutet dies nur "100% der verfügbaren Höhe vom übergeordneten Element übernehmen". Wenn Sie also keine Höhe für ein Element der obersten Ebene angeben, ist die Höhe aller 0untergeordneten Elemente entweder oder die Höhe des übergeordneten Elements. Aus diesem Grund müssen Sie das oberste Element so einstellen, dass es eine min-heightFensterhöhe aufweist.

Ich gebe immer an, dass der Körper eine Mindesthöhe von 100 VH haben soll, und dies erleichtert die Positionierung und Berechnung.

body {
  min-height: 100vh;
}

— Dinesh Pandiyan
quelle

16

Fügen min-height: 100%Sie eine Höhe hinzu und geben Sie sie nicht an (oder setzen Sie sie auf Auto). Es hat den Job für mich total erledigt:

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

— Remus Simion
quelle

16

100vw === 100% der Breite des Ansichtsfensters.

100vh === 100% der Höhe des Ansichtsfensters.

Wenn Sie die divBreite oder Höhe auf 100% der Browserfenstergröße einstellen möchten, sollten Sie Folgendes verwenden:

Für die Breite: 100vw

Für höhe: 100vh

Wenn Sie die Größe verringern möchten, verwenden Sie die CSS- calcFunktion. Beispiel:

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

— Руслан
quelle

12

Es gibt verschiedene Methoden, um die Höhe von a <div>auf 100% einzustellen.

Methode (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>

Erweitern Sie das Snippet

Methode (B) unter Verwendung von 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>

Erweitern Sie das Snippet

Methode (c) unter Verwendung einer Flexbox:

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>

Erweitern Sie das Snippet

— Santosh Khalse
quelle

12

Das hat bei mir funktioniert:

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 */
}

Entnommen von dieser Seite .

— testen
quelle

12

Am einfachsten ist es, es so zu machen.

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

<div></div>

Erweitern Sie das Snippet

— EMILO
quelle

11

Versuchen Sie setzen height:100%in html&body

html, 
body {
    height: 100%;
}

Und wenn Sie 2 div Höhe gleich verwenden möchten, verwenden oder setzen Sie die übergeordnete Elementeigenschaft display:flex.

— Mohammed Javed
quelle

9

Trotz all der Antworten hier war ich überrascht, dass niemand das Problem wirklich gelöst hat. Wenn ich 100vh height/ verwendet habe min-height, ist das Layout unterbrochen, wenn der Inhalt länger als eine Seite war. Wenn ich stattdessen 100% height/ verwendete min-height, brach das Layout, wenn der Inhalt kleiner als die Seitenhöhe war.

Die Lösung, die ich gefunden habe und die beide Fälle löste, bestand darin, die beiden wichtigsten Antworten zu kombinieren:

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

— Maschinenhost
quelle

1

Ich habe eine Navigationsleiste mit einer festen Höhe von 90 Pixel, daher musste ich nur Ihre "100vh" in "calc (100vh - 90px)" ändern

— Mark Jackson

8

Verwenden Sie einfach die "vh" -Einheit anstelle von "px", was die Höhe des Ansichtsfensters bedeutet.

height: 100vh;

— Khalifeh
quelle

7

Blockelemente belegen standardmäßig die gesamte Breite ihres übergeordneten Elements.

Auf diese Weise erfüllen sie ihre Entwurfsanforderungen, nämlich vertikales Stapeln.

9.4.1 Formatierungskontexte blockieren

In einem Blockformatierungskontext werden Felder vertikal nacheinander angeordnet, beginnend am oberen Rand eines enthaltenden Blocks.

Dieses Verhalten erstreckt sich jedoch nicht auf die Höhe.

Standardmäßig entsprechen die meisten Elemente der Höhe ihres Inhalts ( height: auto).

Anders als bei der Breite müssen Sie eine Höhe angeben, wenn Sie zusätzlichen Platz benötigen.

Beachten Sie daher diese beiden Dinge:

Wenn Sie nicht die volle Breite wünschen, müssen Sie die Breite eines Blockelements definieren
Sofern Sie keine Inhaltshöhe wünschen, müssen Sie die Höhe eines Elements definieren

.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>

Erweitern Sie das Snippet

— Michael Benjamin
quelle

7

Hier ist etwas, das nicht genau dem entspricht, was Sie in früheren Antworten hatten, aber es könnte für einige hilfreich sein:

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
quelle

6

Verwenden Sie FlexBox CSS

Flexbox ist perfekt für diese Art von Problem geeignet. Während Flexbox hauptsächlich für das Layout von Inhalten in horizontaler Richtung bekannt ist, eignet es sich auch für vertikale Layoutprobleme. Alles, was Sie tun müssen, ist, die vertikalen Abschnitte in einen Flex-Container zu wickeln und auszuwählen, welche Sie erweitern möchten. Sie belegen automatisch den gesamten verfügbaren Platz in ihrem Container.

— robross0606
quelle

6

Eine der Optionen ist die Verwendung der CSS-Tabelle. Es bietet hervorragende Browserunterstützung und funktioniert sogar in Internet Explorer 8.

JSFiddle-Beispiel

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>

Erweitern Sie das Snippet

— Aufkleber
quelle

6

Versuchen Sie dies - getestet:

body {
  min-height: 100%;
}

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

Edit: 2020 Update:

Sie können vhjetzt verwenden:

#right, #left {
  height: 100vh
}

— lukaszkups
quelle

5

Sie können display: flexund verwendenheight: 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>

Erweitern Sie das Snippet

— Thuc Nguyen
quelle

Es wurden bereits mehrere Flexbox-Lösungen veröffentlicht, darunter eine mit genau dieser Implementierung, die erst 26 Tage vor dieser Antwort veröffentlicht wurde.

— TylerH

5

Sie müssen zwei Dinge tun: Zum einen müssen Sie die Höhe auf 100% einstellen, was Sie bereits getan haben. Zweitens wird die Position auf absolut gesetzt. Das sollte den Trick machen.

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

Quelle

— Prabhakar Undurthi
quelle

3

Veraltete Lösung. Verwenden Sie vhstattdessen.

— avalanche1

1

Nicht verwenden, vhwenn Sie Responsive Design auf Mobilgeräten verwenden möchten.

— Alexander Kim

5

Versuchen Sie das folgende CSS:

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

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

— Problemkind
quelle

5

Eigentlich funktionierte für mich am besten die Nutzung des vhGrundstücks.

In meiner React-Anwendung wollte ich, dass das div auch bei Größenänderung mit der Seite hoch übereinstimmt. Ich habe es versucht height: 100%;, overflow-y: auto;aber keiner von ihnen hat funktioniert, als die Einstellung height:(your percent)vh;wie beabsichtigt funktioniert hat.

Hinweis: Wenn Sie Polster, runde Ecken usw. verwenden, müssen Sie diese Werte von Ihrem vhEigenschaftsprozentsatz abziehen. Andernfalls wird zusätzliche Höhe hinzugefügt und Bildlaufleisten angezeigt. Hier ist mein Beispiel:

.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
quelle

Übrigens, Sie erwähnen 'abgerundete Ecken', die sich auf die Höhe Ihres Elements auswirken. Ich gehe box-sizing: border-box;davon aus, dass die Einstellung dies überwinden würde. Dies bedeutet, dass die Rahmengröße auch bei der Berechnung der Größe (Breite und Höhe) des Elements berücksichtigt wird.

— Neek

5

Versuchen Sie dies einmal ...

*{
  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>

Erweitern Sie das Snippet

— Sunil Rajput
quelle

3

Wenn Sie position: absolute;und jQuery verwenden, können Sie verwenden

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

— John Smith Optional
quelle

1

JavaScript ist nicht erforderlich. Die moderne Lösung ist die Verwendung des CSS-Flexbox-Modells .

— Dan Dascalescu

Wenn Sie JS verwenden, fand ich dies sehr nützlich. HINWEIS: Es ist am besten, dies mit $ (window) .load () zu verwenden, da mit F5 oder STRG + F5 unterschiedliche Ergebnisse zurückgegeben werden. Überprüfen Sie diesen Link für weitere Informationen. 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
quelle

1

Mögliche Rechtschreibfehler: widht(gegen Ende)

— Peter Mortensen

So erstellen Sie eine div 100% -Höhe des Browserfensters

Viewport-Percentage (oder Viewport-Relative) Längen

Was sind die prozentualen Längen des Ansichtsfensters?

Wie kann ein Teiler die Höhe des Browsers ausfüllen?

HTML

CSS

Welche Browser unterstützen diese neuen Geräte?

Wie kann dies mit mehreren Spalten verwendet werden?

Wie ist 100vhanders als 100%?

HTML

CSS

Wie ist `100vh`anders als `100%`?