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 einzustellen height: 100%, aber es funktioniert nicht.

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

Versuchen Sie, die Höhe des HTML-Elements ebenfalls auf 100% einzustellen.

html, 
body {
    height: 100%;
}

Body sucht in seinem übergeordneten Element (HTML) nach Informationen zum Skalieren der dynamischen Eigenschaft. Daher muss für das HTML-Element auch die Höhe festgelegt werden.

Der Inhalt des Körpers muss sich jedoch wahrscheinlich dynamisch ändern. Wenn Sie die Mindesthöhe auf 100% einstellen, wird dieses Ziel erreicht.

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

Alternativ zum Festlegen der Höhe des Elements htmlund des bodyElements 100%können Sie auch die prozentuale Länge des Ansichtsfensters verwenden.

5.1.2. Prozentuale Länge des Ansichtsfensters: 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änglich enthaltenen Blocks geändert wird, werden sie entsprechend skaliert.

In diesem Fall können Sie den Wert verwenden, bei 100vhdem es sich um die Höhe des Ansichtsfensters handelt.

Beispiel hier

body {
  height: 100vh;
  padding: 0;
}

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

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

Wenn Sie ein Hintergrundbild haben, möchten Sie dies stattdessen einstellen:

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

Dies stellt sicher, dass Ihr Body-Tag weiter wachsen kann, wenn der Inhalt größer als das Ansichtsfenster ist, und dass das Hintergrundbild weiterhin wiederholt / gescrollt / was auch immer wird, wenn Sie mit dem Scrollen nach unten beginnen.

Denken Sie daran , wenn Sie IE6 unterstützen müssen Sie müssen einen Weg finden , in verkeilen height:100%für Körper, IE6 Leckereien heightmag min-heightsowieso.

Wenn Sie die Ränder am Körper behalten möchten und keine Bildlaufleisten möchten, verwenden Sie das folgende CSS:

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

Durch die Einstellung erhalten body {min-height:100%} Sie Bildlaufleisten.

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

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

Nach dem Testen verschiedener Szenarien halte ich dies für die beste Lösung:

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

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

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

Es ist insofern dynamisch, als die htmlund die bodyElemente automatisch erweitert werden, wenn ihr Inhalt überläuft. Ich habe dies in der neuesten Version von Firefox, Chrome und IE 11 getestet.

Sehen Sie sich hier die vollständige Geige an (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%;
}

Wenn Sie das obige CSS verwenden, werden HTML und Body-Element NICHT automatisch erweitert, wenn ihr Inhalt wie hier gezeigt überläuft:

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

Beachten Sie beim Scrollen den sich wiederholenden Hintergrund? Dies geschieht, weil die Höhe des Körperelements aufgrund des Überlaufens der untergeordneten Tabelle NICHT zugenommen hat. Warum wird es nicht wie jedes andere Blockelement erweitert? Ich bin mir nicht sicher. Ich denke, Browser behandeln dies falsch.

html {
    height: 100%;
}

body {
    min-height: 100%;
}

Das Einstellen einer Mindesthöhe von 100% am Körper wie oben gezeigt verursacht andere Probleme. Wenn Sie dies tun, können Sie nicht angeben, dass ein untergeordnetes Div oder eine untergeordnete Tabelle eine prozentuale Höhe einnimmt, wie hier gezeigt:

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

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

Was ich zu Beginn buchstäblich jeder von mir verwendeten CSS-Datei 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 positioniert werden, um links oder rechts davon Platz zu haben.

Das Auffüllen von 0 stellt sicher, dass die HTML- und BODY-Elemente aufgrund von Browser-Standardeinstellungen nicht automatisch alles in ihnen nach unten oder rechts drücken.

Die Breiten- und Höhenvarianten sind auf 100% eingestellt, um sicherzustellen, dass der Browser die Größe nicht ändert, um tatsächlich einen automatisch eingestellten Rand oder Abstand zu erhalten, wobei Min und Max festgelegt werden, nur für den Fall, dass seltsame, unerklärliche Dinge passieren, obwohl Sie wahrscheinlich brauche ich sie nicht.

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

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

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

Ein schnelles Update

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

Eine bessere Lösung mit dem heutigen CSS

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

Hier:

html,body{
    height:100%;
}

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

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)
}

Versuchen

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

Bitte prüfen Sie das:

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

Oder probieren Sie die neue Methode Ansichtsfensterhöhe:

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

Ansichtsfenster: Wenn Sie das Ansichtsfenster verwenden, bedeutet dies, dass der Bildschirminhalt unabhängig von der Größe des Bildschirms in voller Höhe angezeigt wird.

Wenn Sie nicht Ihre eigene CSS-Datei bearbeiten und die Höhenregeln selbst definieren möchten, lösen die typischsten CSS-Frameworks dieses Problem auch, indem das body-Element die gesamte Seite ausfüllt und unter anderem mehrere Probleme verursacht Größen von Ansichtsfenstern.

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

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 Verläufen. Bildlaufleisten sind je nach Bedarf verfügbar.

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 wird verwenden min-height: 100vhund wenn der Browser irgendwie etwas älter ist, min-height: 100%wird dies der Fallback sein.

Dies overflow: autoist erforderlich, wenn Sie möchten, dass der Körper und HTML ihre Höhe erhöhen, wenn Sie die Größe des Bildschirms ändern (z. B. auf eine mobile Größe).

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

body{ height: 100vh; }

Alle Antworten sind 100% richtig und gut erklärt, aber ich habe etwas Gutes und sehr Einfaches getan, um es ansprechbar zu machen.

Hier nimmt das Element eine 100% ige Höhe des Ansichtsfensters ein, aber wenn es um die mobile Ansicht geht, sieht es in der Porträtansicht (mobil) nicht besonders gut aus. Wenn der Ansichtsfenster kleiner wird, wird das Element kollabieren und sich überlappen. Um es hier wenig ansprechbar zu machen, ist Code. Ich hoffe, jemand wird dabei Hilfe bekommen.

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

Hier Update

html
  {
    height:100%;
  }

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

Über den zusätzlichen Platz unten: Ist Ihre Seite eine ASP.NET-Anwendung? Wenn ja, ist wahrscheinlich fast alles in Ihrem Markup verpackt. Vergessen Sie nicht, das Formular ebenfalls zu stylen. Durch Hinzufügen overflow:hidden;zum Formular wird möglicherweise der zusätzliche Platz unten entfernt.

@media all {
* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
} }

CSS3 hat eine neue Methode.

 height:100vh

Dadurch entspricht ViewPort zu 100% der Höhe.

So sollte Ihr Code sein

 body{
 height:100vh; 
 }