JQ:子區域Height100%,<br>父區域如何設定?

練習:子區域為Height100%,父區域如何設定?

說明:
子區域為Height100%,父區域無法展開

<header>header</header>
<article>
	<section>section1</section>
	<section>section2<div>sectin2_div</div></section>
	<section>section3</section>
</article>
<footer>footer</footer>
</body>
<style>
*{padding:0; margin:0}
html,body{ height:100%; width:100%; font-size:240px; text-align:center;}
header{background:#e1bee7; height:100%;}
/* 父包子,height不可為min-height、 但height100%實際未撐開,加footer則會跑上來*/
article{height:100%;} 
	section:nth-child(1){background:#90caf9; min-height:100%}
	section:nth-child(2){background:#81c784; min-height:100%}
		div{height:1600px;}   /*div 為section2 空間Div*/
	section:nth-child(3){background:#ffee58; min-height:100%;}
footer{height:300px; background:#FF9B9D;}
</style>

呈現結果

解決方法

刪除article之下CSS

var sumHeight=0;
$('section').each(function(index, element) {
	if($(this).height() <= $(window).height()){
		$(this).height($(window).height());
	}
});	

呈現結果