it-swarm.com.de

Stellen Sie sicher, dass der Körper 100% der Browserhöhe hat

Ich möchte, dass der Körper 100% der Browserhöhe hat. Kann ich das mit CSS machen?

Ich habe versucht, height: 100% einzustellen, aber es funktioniert nicht.

Ich möchte eine Hintergrundfarbe für eine Seite festlegen, die das gesamte Browserfenster ausfüllt. Wenn die Seite jedoch wenig Inhalt enthält, wird am unteren Rand ein hässlicher weißer Balken angezeigt.

686
bodyofheat

Stellen Sie auch die Höhe des HTML-Elements auf 100% ein. 

html, 
body {
    height: 100%;
}

Body sucht beim übergeordneten Element (HTML) nach der Skalierung der dynamischen Eigenschaft. Daher muss die Höhe des HTML-Elements ebenfalls festgelegt werden. 

Der Inhalt des Körpers muss sich jedoch wahrscheinlich dynamisch ändern. Die Einstellung der Mindesthöhe auf 100% wird dieses Ziel erreichen.

html {
  height: 100%;
}
body {
  min-height: 100%;
}
894
BentOnCoding

Als Alternative zum Festlegen der Höhe des Elements html und body auf 100% können Sie auch die Länge des Viewport-Prozentsatzes verwenden.

5.1.2. Prozentuale Längen von Ansichtsfenstern: die Einheiten „vw“, „vh“, „vmin“, „vmax“

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änglichen enthaltenden Blocks geändert wird, werden sie entsprechend skaliert.

In diesem Fall können Sie den Wert 100vh verwenden. Dies ist die Höhe des Viewports.

Beispiel hier

body {
    height: 100vh;
}
body {
    min-height: 100vh;
}

Dies wird in den meisten modernen Browsern unterstützt - Unterstützung finden Sie hier .

174
Josh Crozier

Wenn Sie ein Hintergrundbild haben, sollten Sie stattdessen Folgendes einstellen:

html{
  height: 100%;
}
body {
  min-height: 100%;
}

Dadurch wird sichergestellt, dass Ihr Body-Tag weiter wachsen kann, wenn der Inhalt höher als der Ansichtsbereich ist, und dass das Hintergrundbild sich weiterhin wiederholt/scrollt/was auch immer, wenn Sie nach unten scrollen.

Denken Sie daran, wenn Sie IE6 unterstützen müssen, müssen Sie eine Möglichkeit finden, height:100% für body zu verwenden, und IE6 behandelt height wie min-height.

115
Angry Dan

Wenn Sie die Ränder auf dem Körper beibehalten möchten und keine Bildlaufleisten verwenden möchten, verwenden Sie die folgende CSS:

html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }

Wenn Sie body {min-height:100%} einstellen, werden Bildlaufleisten angezeigt.

Siehe Demo unter http://jsbin.com/aCaDahEK/2/edit?html,output .

68
dpatru
html, body
{
  height: 100%;
  margin: 0;
  padding: 0;
}
26
Catfish

Was ich am Anfang von wörtlich jeder CSS-Datei verwende, die ich verwende, ist Folgendes:

html, body{
    margin: 0;

    padding: 0;

    min-width: 100%;
    width: 100%;
    max-width: 100%;

    min-height: 100%;
    height: 100%;
    max-height: 100%;
}

Der Rand von 0 stellt sicher, dass die HTML- und BODY-Elemente vom Browser nicht automatisch so positioniert werden, dass links oder rechts davon Platz ist.

Durch das Auffüllen von 0 wird sichergestellt, dass die HTML- und BODY-Elemente aufgrund von Browser-Vorgaben nicht automatisch alles nach innen oder rechts drücken.

Die Breiten- und Höhenvarianten sind auf 100% gesetzt, um sicherzustellen, dass der Browser die Größe nicht ändert, um einen automatisch festgelegten Rand oder Abstand festzulegen, und Min und Max sind nur für den Fall eingestellt, dass seltsame, unerklärliche Dinge passieren sie brauchen sie wahrscheinlich nicht.

Diese Lösung bedeutet auch, dass Sie, wie ich es vor einigen Jahren mit HTML und CSS angefangen habe, nicht Ihren ersten <div> einen margin:-8px; eingeben müssen, damit er in die Ecke des Browserfensters passt.


Bevor ich gepostet habe, habe ich mir mein anderes Fullscreen-CSS-Projekt angesehen und festgestellt, dass alles, was ich dort verwendete, nur body{margin:0;} und nichts anderes war, was in den 2 Jahren, in denen ich daran gearbeitet habe, gut funktioniert hat.

Hoffe, diese ausführliche Antwort hilft, und ich fühle deinen Schmerz. In meinen Augen ist es dumm, dass Browser eine unsichtbare Grenze auf der linken und manchmal oberen Seite der body/html-Elemente setzen.

19
MineAndCraft12

Nach dem Testen verschiedener Szenarien glaube ich, dass dies die beste Lösung ist:

html {
    width:100%;
    height: 100%;
    display: table;
}

body {
    width:100%;
    display:table-cell;
}

html, body {
    margin: 0px;
    padding: 0px;
}

Es ist dynamisch, dass das HTML- und das Body-Element automatisch erweitert werden, wenn ihr Inhalt überläuft. Ich habe dies in der neuesten Version von Firefox, Chrome und IE 11 getestet.

Die vollständige Geige finden Sie hier (für Ihre Tischhasser da draußen können Sie sie jederzeit ändern, um ein div zu verwenden):

https://jsfiddle.net/71yp4rh1/9/


Nachdem dies gesagt wurde, gibt es mehrere Probleme mit den hier veröffentlichten Antworten.

html, body {
    height: 100%;
}

Die Verwendung des obigen CSS bewirkt, dass das HTML- und das Body-Element NICHT automatisch erweitert werden, wenn der Inhalt wie hier gezeigt überläuft:

https://jsfiddle.net/9vyy620m/4/

Beachten Sie beim Scrollen den sich wiederholenden Hintergrund? Dies geschieht, weil die Körpergröße des Körpers nicht erhöht wurde, weil die untergeordnete Tabelle überläuft. Warum erweitert es sich nicht wie jedes andere Blockelement? Ich bin mir nicht sicher. Ich denke, dass Browser dies falsch handhaben.

html {
    height: 100%;
}

body {
    min-height: 100%;
}

Die Einstellung einer Mindesthöhe von 100% am Körper verursacht, wie oben gezeigt, andere Probleme. Wenn Sie dies tun, können Sie nicht angeben, dass eine untergeordnete Tabelle oder Tabelle eine prozentuale Höhe einnehmen soll, wie hier gezeigt:

https://jsfiddle.net/aq74v2v7/4/

Hoffe das hilft jemandem. Ich denke, Browser behandeln das falsch. Ich würde erwarten, dass sich die Körpergröße automatisch vergrößert, wenn die Kinder überlaufen. Dies scheint jedoch nicht zu passieren, wenn Sie 100% Höhe und 100% Breite verwenden.

18
OwN

Ein kurzes Update

html, body{
    min-height:100%;
    overflow:auto;
}

Eine bessere Lösung mit dem heutigen CSS

html, body{ 
  min-height: 100vh;
  overflow: auto;
}
13
Jayant Varshney

Hier:

html,body{
    height:100%;
}

body{
  margin:0;
  padding:0
  background:blue;
}
4
Eddie

Bei Bedarf können Sie auch JS verwenden

var winHeight = window.innerHeight    || 
document.documentElement.clientHeight || 
document.body.clientHeight;

var pageHeight = $('body').height();
if (pageHeight < winHeight) {
    $('.main-content,').css('min-height',winHeight)
}
3
Herbs

Bitte prüfen Sie das:

* {margin: 0; padding: 0;}    
html, body { width: 100%; height: 100%;}

Oder probieren Sie die neue Methode Viewport-Höhe:

html, body { width: 100vw; height: 100vh;}

Viewport: Wenn Ihr Viewport verwendet wird, bedeutet, dass der Bildschirminhalt in jeder Größe die volle Höhe des Bildschirms erreicht.

3
Ayyappan K

Wenn Sie nicht selbst Ihre eigene CSS-Datei bearbeiten und die Höhenregeln selbst festlegen möchten, lösen die meisten typischen CSS-Frameworks dieses Problem, indem das body-Element die gesamte Seite ausfüllt und unter anderem mit mehreren Elementen füllt Größen der Ansichtsfenster.

Zum Beispiel: Tacit CSS-Framework löst dieses Problem sofort, wenn Sie keine CSS-Regeln und -Klassen definieren müssen und die CSS-Datei nur in Ihren HTML-Code aufnehmen.

2
Filipe Freire

Nur mit einer Zeile CSS… Sie können dies erledigen.

body{ height: 100vh; }
2
Sanjib Debnath

Versuchen

<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">
2
ak-SE

Versuchen Sie Folgendes hinzuzufügen:

body {
height: 100vh;
}
1
annasvst
html {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100%;
}
html body {
    min-height: 100%
}

Funktioniert für alle gängigen Browser: FF, Chrome, Opera, IE9 +. Funktioniert mit Hintergrundbildern und Farbverläufen. Bildlaufleisten sind als Inhaltsanforderungen verfügbar. 

1
Corni

alle Antworten sind zu 100% korrekt und gut erklärt, aber ich habe etwas Gutes getan und es war sehr einfach, sie ansprechbar zu machen.

in diesem Fall nimmt das Element einen Port mit einer Höhe von 100% ein, aber wenn es um die mobile Ansicht geht, sieht es besonders in der Hochformatansicht (Mobile) nicht gut aus. Wenn der Port kleiner wird, kollabiert das Element und überlappt sich. Um es etwas ansprechbar zu machen, ist hier Code . hoffe, dass jemand Hilfe bekommt.

<style>
.img_wrap{
      width:100%;
      background: #777;
}
.img_wrap img{
      display: block;  
      width: 100px;
      height: 100px;
      padding: 50px 0px;
      margin: 0 auto;
}
.img_wrap img:nth-child(2){
      padding-top: 0;
}
</style>

<div class="img_wrap">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
</div>

<script>
   var windowHeight = $(window).height();
   var elementHeight = $('.img_wrap').height();

   if( elementHeight > windowHeight ){
       $('.img_wrap').css({height:elementHeight});
   }else{
       $('.img_wrap').css({height:windowHeight});
   }
</script>

hier ist JSfiddle Demo.

0
wasimv09

Hier Update

html
  {
    height:100%;
  }

body{
     min-height: 100%;
     position:absolute;
     margin:0;
     padding:0; 
}
0
Anburaj_N

Ich würde das benutzen

html, body{
      background: #E73;
      min-height: 100%;
      min-height: 100vh;
      overflow: auto; // <- this is needed when you resize the screen
    }
<html>
    <body>
    </body>
</html>

Der Browser verwendet min-height: 100vh und wenn der Browser etwas älter ist, ist der min-height: 100% der Fallback.

Der overflow: auto ist erforderlich, wenn Sie möchten, dass Body und HTML ihre Höhe vergrößern, wenn Sie die Größe des Bildschirms ändern (z. B. auf eine mobile Größe).

0
medBouzid