ウィンドウの内側の高さにdivを配置する

Question

高さがウィンドウの高さに等しいヘッダーがあります。ただし、ヘッダーの高さが定義されていない場合でも、ヘッダーの子は同じ位置に残ります。私はその高さにかかわらず、ヘッダーの下部に特定の子供を配置したい。効果的に、divはスクロールダウンするまで画面の最下部に表示されます。これにはいくつかの簡潔なjqueryソリューションがありますか？

$(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

あなたは高さがウィンドウの高さに等しいヘッダータグを持っている理由私は知りません。しかし、あなたの質問を助けるために、

私はあなたにjsなしで使用できるソリューションを提供しています。

ボディとhtmlタグの高さを100％に設定しました。

body, html { 
    height:100%; 
} 

header { 
    min-height: 100%; 
} 

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

これはあなたが探しているものですか？

Answer 2

JSやjQueryはまったく必要ありません。

header { 
    height: 100vh; 
} 

これは視聴者の身長の100％を意味します。それはCSSの素晴らしい単位です。