Körper auf 100% der Browserhöhe bringen

Question

Ich möchte body haben 100% der Browserhöhe. Kann ich das mit CSS erreichen?

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

Ich möchte eine Hintergrundfarbe für eine Seite festlegen, die das gesamte Browserfenster ausfüllt, aber wenn die Seite wenig Inhalt hat, erhalte ich einen hässlichen weißen Balken am unteren Rand.

Answer 1

Für die wahren Puristen: Diese Methode respektiert die Standardränder des Browsers und verhindert das unerwünschte Scrollen, das durch die anderen Methoden erzeugt wird, und wächst zudem, wenn der Inhalt wächst. Getestet in Chrome, Safari und Firefox. Die Hintergründe sind nur zur Show...

html {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: red;
}
body {
  flex:1;
  background: green;
}

Answer 2

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 mit allen gängigen Browsern: FF, Chrome, Opera, IE9+. Funktioniert mit Hintergrundbildern und Farbverläufen. Scrollbars sind je nach Inhalt verfügbar.

Answer 3

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

hier wird das Element 100% Höhe des View Ports einnehmen, aber wenn es zur mobilen Ansicht kommt, sieht es nicht gut aus, besonders in der Hochformatansicht (mobil), so dass, wenn der View Port kleiner wird, das Element kollabiert und sich gegenseitig überlappt. um es also ein wenig reaktionsfähig zu machen, hier ist der Code. hoffe, dass jemand Hilfe von diesem 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.

Answer 4

Mit nur 1 Zeile CSS können Sie das schaffen.

body{ height: 100vh; }

Answer 5

Ich gestalte den div-Container - in der Regel das einzige Kind des body - mit folgendem css

.body-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}