it-swarm.com.de

So stellen Sie eine Höhe von 100% des Browserfensters ein

Ich habe ein Layout mit zwei Spalten - ein linkes div und ein rechtes div.

Das rechte div hat einen grauen background-color und muss je nach Höhe des Browserfensters des Benutzers vertikal erweitert werden. Im Moment endet der background-color am letzten Stück des div Inhalts.

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

1957
mike

Es gibt einige CSS 3-Maßeinheiten, die als:

Ansichtsfenster-Prozentsatz (oder Ansichtsfenster-Relativ) Länge

Was sind Ansichtsfenster-Längen in Prozent?

Aus der oben genannten verknüpften W3-Kandidatenempfehlung:

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

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

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

Für diese Frage können wir vh verwenden: 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 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 davon in Gebrauch.

Welche Browser unterstützen diese neuen Geräte?

Dies wird derzeit auf allen aktuellen Hauptbrowsern mit Ausnahme von Opera Mini unterstützt. Check out Kann ich verwenden ... für weitere Unterstützung.

Wie kann dies mit mehreren Spalten verwendet werden?

Im Fall der vorliegenden Frage, die einen linken und einen rechten Teiler enthält, ist hier ein JSFiddle-Beispiel , das ein zweispaltiges Layout zeigt, an dem sowohl vh als auch vw beteiligt sind.

Wie unterscheidet sich 100vh von 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 ist hier auf 100% height gesetzt, aber da das div enthaltende Tag eine Höhe von 200 Pixel hat, werden 100% von 200 Pixel zu 200 Pixel, nicht 100% der body Höhe. Die Verwendung von 100vh bedeutet stattdessen, dass das p -Tag unabhängig von der body -Höhe 100% der div -Höhe beträgt. Werfen Sie einen Blick auf diese begleitende JSFiddle , um den Unterschied leicht zu erkennen!

2640
James Donnelly

Wenn Sie die Höhe eines <div> oder eines beliebigen Elements festlegen möchten, sollten Sie die Höhe von <body> und <html> ebenfalls 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%;
}
546
Ariona Rian

Wenn Sie Ihre Elemente absolut positionieren können,

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

würde es tun.

268
Tinister

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

In diesem Fall können Sie vh verwenden, das sich auf 1% der Höhe des Ansichtsfensters bezieht ...

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

Schauen Sie sich das Bild an, das ich hier für Sie gezeichnet habe:

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

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>
98
Alireza

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

Mit dem CSS-Flex-Modell wird die Lösung des 100% -Höhenproblems sehr, sehr einfach: Verwenden Sie height: 100%; display: flex für die übergeordneten Elemente und flex: 1 für die untergeordneten Elemente. Sie belegen automatisch den gesamten verfügbaren Platz in ihrem Container.

Beachten Sie, wie einfach das Markup und das CSS sind. Keine Tisch-Hacks oder so.

Das Flex-Modell ist von allen gängigen Browsern unterstützt 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 hier mehr über das Flex-Modell .

94
Airen

Sie erwähnen nicht einige wichtige Details wie:

  • Ist das Layout eine 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>

Abhängig davon, welche Säulen 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 (insbesondere im Hinblick auf die browserübergreifende Verwendung) mit Floats gefunden.

53
cletus

Das hat bei mir funktioniert:

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

Verwenden Sie auf diese Weise position:fixed anstelle von position:absolute, auch wenn Sie den Bildlauf nach unten ausführen, um den Bereich bis zum Ende des Bildschirms zu erweitern.

32
Majda

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

In Ihrem CSS verwenden Sie:

#your-object: height: 100vh;

Verwenden Sie modernizr für Browser, die vh-units nicht unterstützen.

Fügen Sie dieses Skript hinzu (um die Erkennung für vh-units hinzuzufügen)

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

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

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

Wenn Sie width: 100% angeben, bedeutet dies, dass "100% der verfügbaren Breite des übergeordneten Elements oder der Breite des Fensters verwendet werden".

Wenn Sie height: 100% angeben, bedeutet dies nur, dass "100% der verfügbaren Höhe vom übergeordneten Element beansprucht werden". Dies bedeutet, dass, wenn Sie für ein Element der obersten Ebene keine Höhe angeben, die Höhe aller untergeordneten Elemente entweder 0 oder die Höhe des übergeordneten Elements ist. Aus diesem Grund müssen Sie das oberste Element festlegen, um ein zu haben min-height der Fensterhöhe.

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

body {
  min-height: 100vh;
}
22
Dinesh Pandiyan

Füge min-height: 100% hinzu und gib keine Höhe an (oder setze sie auf auto). Für mich hat es den Job total gemacht:

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

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

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

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

Für die Breite: 100vw

Für die Höhe: 100vh

Wenn Sie eine kleinere Größe festlegen möchten, verwenden Sie die Funktion CSS calc. Beispiel:

#example {
    width: calc(100vw - 32px)
}
14
Руслан

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 aus diese Seite .

12
testing

Es gibt verschiedene Methoden, um die Höhe eines <div> auf 100% zu setzen.

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>

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>

Methode (c) mit 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>
12
Santosh Khalse

Versuchen Sie, height:100% in html & body einzustellen.

html, 
body {
    height: 100%;
}

Und wenn Sie dieselbe Höhe 2 div möchten, verwenden Sie oder setzen Sie die Eigenschaft display:flex des übergeordneten Elements.

11
Mohammed Javed

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

height: 100vh;
7
khalifeh

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/

7
brand-it

Verwenden Sie FlexBox CSS

Flexbox ist die perfekte Lösung für diese Art von Problem. Flexbox ist zwar hauptsächlich für das horizontale Layout von Inhalten bekannt, eignet sich jedoch auch für vertikale Layoutprobleme. Sie müssen lediglich die vertikalen Abschnitte in einen flexiblen Container einwickeln und auswählen, welche Sie erweitern möchten. Sie belegen automatisch den gesamten verfügbaren Platz in ihrem Container.

6
robross0606

Eine der Optionen ist die Verwendung einer 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>
6
Stickers

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

So erfüllen sie ihre gestalterische Anforderung, vertikal zu stapeln.

9.4.1 Blockformatierungskontexte

In einem Blockformatierungskontext werden Kästchen vertikal hintereinander angeordnet, beginnend am oberen Rand eines enthaltenen Blocks.

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

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

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

Beachten Sie daher diese beiden Punkte:

  • sofern 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>
6
Michael_B

Sie können display: flex und height: 100vh verwenden.

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>
5
Thuc Nguyen

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

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

Quelle

5
Prabhakar

Versuchen Sie dies - getestet:

body {
  min-height: 100%;
}

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

Versuchen Sie folgendes CSS:

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

body {
    height: 100%;
}

#right {
    min-height: 100%;
}
5
ProblemChild

Eigentlich funktionierte es für mich am besten, die Eigenschaft vh zu verwenden.

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

Hinweis: Wenn Sie Auffüllungen, runde Ecken usw. verwenden, müssen Sie diese Werte von den Prozentwerten Ihrer Eigenschaft vh subtrahieren. Andernfalls wird eine zusätzliche Höhe hinzugefügt und Bildlaufleisten werden 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);
}
4
JimmyFlash

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

$("#mydiv").css("height", $(document).height() + "px");
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>
2
RamNiwas Sharma

Am einfachsten:

html,
body {
  height: 100%;
  min-height: 100%;
}
body {
  position: relative;
  background: purple;
  margin: 0;
  padding: 0;
}
.fullheight {
  display: block;
  position: relative;
  background: red;
  height: 100%;
  width: 300px;
}
<html class="">

<body>
  <div class="fullheight">
    This is full height.
  </div>
</body>

</html>
1
Tony Smith

Sie können das folgende CSS verwenden, um ein Div 100% der Höhe des Browserfensters festzulegen:

display: block;
position: relative;
bottom: 0;
height: 100%;
0
mohammad nazari

Dieses Zeug passt die Höhe des Inhalts automatisch an Ihren Browser an. Ich hoffe das wird für dich funktionieren. Probieren Sie einfach dieses Beispiel aus.

Sie müssen nur height:100% einrichten.

html,body {
  height: 100%;
  margin: 0;
}
.content {
  height: 100%;
  min-height: 100%;
  position: relative;
}
.content-left {
  height: auto;
  min-height: 100%;
  float: left;
  background: #ddd;
  width: 50%;
  position: relative;
}

#one {
  background: url(http://cloud.niklausgerber.com/1a2n2I3J1h0M/red.png) center center no-repeat scroll  #aaa;
  width: 50%;
  position: relative;
  float: left;
}

#two {
 background: url(http://cloud.niklausgerber.com/1b0r2D2Z1y0J/dark-red.png) center center no-repeat scroll #520E24;
  width: 50%;
  float: left;
  position: relative;
  overflow-y: scroll;
}
<div class='content' id='one'></div>
<div class='content-left' id='two'></div>
0
Rudra

Obwohl diese Lösung mit jQuery durchgeführt wird, kann sie für jeden nützlich sein, der Spalten erstellt, um die Bildschirmgröße anzupassen.

Für Spalten, die oben auf der Seite beginnen, ist diese Lösung die einfachste.

body,html{
  height:100%;
}

div#right{
  height:100%
}

Für Spalten, die nicht am oberen Rand der Seite beginnen (zum Beispiel: wenn sie unterhalb der Überschrift beginnen).

<script>
     $(document).ready(function () {
        var column_height = $("body").height();
        column_height = column_height - 100; // 100 is the header height
        column_height = column_height + "px";
        $("#column").css("height",column_height);
    });
</script>

Die erste Methode wendet die Körpergröße und auch die Spalten an, dh Startpixel + height100%.

Bei der zweiten Methode wird die Höhe der dem Benutzer angezeigten Seite ermittelt, indem die Höhe des Hauptteils ermittelt wird. Anschließend wird die Größe der Kopfzeile abgezogen, um festzustellen, wie viel Höhe noch zur Anzeige der Spalte übrig ist.

0
zurfyx