Frage Wie mache ich eine div 100% Höhe des Browserfensters?


Ich habe ein Layout mit zwei Spalten - eine linke div und ein Recht div.

Das Recht div hat ein Grau background-color, und ich brauche es vertikal zu erweitern, abhängig von der Höhe des Browserfensters des Benutzers. Gerade jetzt die background-color endet beim letzten Stück darin div.

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


1681
2017-10-15 21:18


Ursprung


Antworten:


Es gibt ein paar CSS3-Maßeinheiten namens:

Viewport-Prozentsatz (oder Viewport-Relativ) Längen

Was sind Viewport-Prozentlängen?

Aus der verknüpften W3-Kandidatenempfehlung oben:

Die Ansichtsfensterprozentsatzlängen sind relativ zur Größe des ursprünglichen umschließenden Blocks. Wenn die Höhe oder Breite des ursprünglichen umschließenden Blocks geändert wird, werden sie entsprechend skaliert.

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

Wie kann dies verwendet werden, um einen Teiler die Höhe des Browsers zu füllen?

Für diese Frage können wir uns bedienen vh: 1vh entspricht 1% der Höhe des Ansichtsfensters. Das heißt, 100vh entspricht der Höhe des Browserfensters, unabhängig davon, wo sich das Element in der DOM-Struktur befindet:

HTML

<div></div>

CSS

div {
    height:100vh;
}

Das ist buchstäblich alles was benötigt wird. Hier ist ein JSFiddle Beispiel davon in Benutzung.

Welche Browser unterstützen diese neuen Einheiten?

Dies wird derzeit auf allen aktuellen Hauptbrowsern abgesehen von Opera Mini unterstützt. Auschecken Kann ich benutzen... für weitere Unterstützung.

Wie kann dies mit mehreren Spalten verwendet werden?

Bei der vorliegenden Frage mit linker und rechter Trennlinie ist hier ein JSFiddle Beispiel zeigt ein zweispaltiges Layout mit beiden vh und 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 p Tag hier ist auf 100% Höhe eingestellt, aber weil es enthält div hat 200px Höhe, 100% von 200px wird 200px, nicht 100% der body Höhe. Verwenden 100vh bedeutet stattdessen, dass die p Tag wird 100% Höhe des sein body ungeachted der div Höhe. Schau dir das an Begleiten JSFiddle um den Unterschied leicht zu sehen!


2364
2018-05-30 13:33



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

Hier ist ein Beispiel:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

520
2017-12-11 13:10



Wenn du deine Elemente absolut positionieren kannst,

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

würde es tun.


242
2017-10-15 21:31



Sie können die View-Port-Unit 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*/
}

127
2018-05-04 11:11



Alle anderen Lösungen, einschließlich der Top-Eins mit gewählt vh sind suboptimal im Vergleich zu den Flex-Modell Lösung.

Mit dem Aufkommen der CSS FlexmodellDas Lösen des 100% -Höhenproblems wird sehr, sehr einfach: verwenden height: 100%; display: flexauf dem Elternteil und flex: 1 auf den Kindelementen. Sie belegen automatisch den gesamten verfügbaren Speicherplatz in ihrem Container.

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

Das Flex-Modell ist unterstützt von allen gängigen Browsern sowie 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>

Erfahren Sie mehr über die Flex-Modell Hier.


85
2018-06-12 14:14



Sie erwähnen nicht einige wichtige Details wie:

  • Ist das Layout feste Breite?
  • Sind eine oder beide Spalten fest in der 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>

Abhängig davon, welche Spalten fixiert werden müssen und welche flüssig sind, gibt es viele Variationen. Sie können dies auch mit absoluter Positionierung tun, aber ich habe im Allgemeinen bessere Ergebnisse gefunden (insbesondere in Bezug auf Browser-übergreifend), stattdessen Floats zu verwenden.


47
2017-10-15 23:13



Sie können verwenden vh in diesem Fall, der relativ ist 1% der Höhe des Ansichtsfensters.

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

Schau dir das Bild an, das ich für dich zeichne:

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

Probieren Sie das 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>


40
2018-06-03 17:43



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

In Ihrer CSS verwenden Sie:

#your-object: height: 100vh;

Für Browser, die dies nicht unterstützen vh-units, verwenden Sie moderniszr.

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 abschließend diese Funktion, um die Höhe des Ansichtsfensters hinzuzufügen #your-object wenn der Browser dies nicht unterstützt vh-units:

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

25
2017-08-21 16:57



Das hat bei mir funktioniert:

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

Benutzen position:fixed Anstatt von position:absoluteAuf diese Weise wird selbst beim Herunterscrollen der Division bis zum Ende des Bildschirms expandiert.


24
2017-07-27 16:18



Hinzufügen min-height: 100% und geben Sie keine Höhe an (oder setzen Sie sie auf Auto). Es hat meine Aufgabe vollkommen erfüllt:

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

14
2017-12-10 21:34