在窗口innerheight的底部對齊div

Question

我有一個高度等於窗口的innherheight的標題。儘管標題的高度未定義，但這會將標題的子項留在相同的位置。我想將一個特定的孩子放在標題的底部，而不考慮它的高度。實際上，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。

將body和html標記高度設置爲100％。

body, html { 
    height:100%; 
} 

header { 
    min-height: 100%; 
} 

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

這是你在找什麼？

Answer 2

根本不需要JS或jQuery。這是另一種解決方案：

header { 
    height: 100vh; 
} 

這意味着觀看者身高的100％。這是CSS中的漂亮單位。