Ausrichten div am unteren Rand des Fensters Innenhöhe

Question

Ich habe eine Kopfzeile mit einer Höhe, die der inneren Höhe des Fensters entspricht. Dadurch bleiben die untergeordneten Elemente des Headers an der gleichen Position, obwohl die Höhe des Headers nicht definiert war. Ich möchte ein bestimmtes Kind am unteren Rand des Headers platzieren, unabhängig von seiner Höhe. Effektiv würde das div am unteren Rand des Bildschirms sein, bis nach unten gescrollt. Gibt es eine prägnante jQuery-Lösung dafür?

$(document).ready(function() { 
 
    function setHeight() { 
 
    windowHeight = $(window).innerHeight(); 
 
    $('header').css('min-height', windowHeight); 
 
    }; 
 
    setHeight(); 
 

 
    $(window).resize(function() { 
 
     setHeight(); 
 
    }); 
 
});

header {background-color:black; width:100%;} 
 
#top {background-color:blue;} 
 
#center {padding:1em; background-color:red;} 
 
#bottom {background-color:green;}

<header> 
 
<div id="top">top</div> 
 
<div id="center">center</div> 
 
<div id="bottom">bottom</div> 
 
</header>

Answer 1

Ich weiß nicht, warum Sie einen Header-Tag haben, die Höhe auf Fensterhöhe entspricht. Aber um Ihre Frage zu helfen, können Sie verwenden,

Ich gebe Ihnen eine Lösung, die Sie ohne js verwenden können.

Stellen Sie Körper und HTML-Tag-Höhe auf 100%.

body, html { 
    height:100%; 
} 

header { 
    min-height: 100%; 
} 

#bottom { 
    position: absolute; 
    bottom: 0; 
} 

Ist das wonach Sie suchen?

Answer 2

Sie benötigen JS oder jQuery überhaupt nicht. Hier ist eine andere Lösung:

header { 
    height: 100vh; 
} 

Dies bedeutet 100% der Höhe des Betrachters. Es ist eine nette Einheit in CSS.