網(wǎng)站前端制作之htmldiv高度自適應(yīng)

高度自適應(yīng)
網(wǎng)頁(yè)布局中經(jīng)常要定義元素的寬和高。但很多時(shí)候我們希望元素的大小能夠根據(jù)窗口或子元素自動(dòng)調(diào)整，這就是自適應(yīng)。
元素自適應(yīng)在網(wǎng)頁(yè)布局中非常重要，它能夠使網(wǎng)頁(yè)顯示更靈活，可以適應(yīng)在不同設(shè)備、不同窗口和不同分辨率下顯示。
1)元素高度自適應(yīng)窗口高度
設(shè)置方法：html,body{height:100%;}
需要自適應(yīng)的元素：height:100%;
2)自適應(yīng)元素高度：
父元素：height：value；
需要自適應(yīng)父元素高度的子元素：height:100%;
height:auto，是指根據(jù)塊內(nèi)內(nèi)容自動(dòng)調(diào)節(jié)高度。
height:100%，是指其相對(duì)父塊高度而定義的高度，也就是按照離它最近且有定義高度的父層的高度來(lái)定義高度。
3)浮動(dòng)元素父元素高度自適應(yīng)（高度塌陷）
hack1：給父元素添加聲明overflow:hidden;
hack2：在浮動(dòng)元素下方添加空div,并給該元素添加聲明：clear:both;height:0;overflow:hidden;font-size:0;
hack3：萬(wàn)能清除浮動(dòng)法
:after {content:"."; display:block; height:0; visibility:hidden; clear:both;}
*visibility:hidden/visible;隱藏/可見(jiàn)
*visibility:hidden;和display:none;的區(qū)別：
visibility:hidden;屬性會(huì)使對(duì)象不可見(jiàn)，但該對(duì)象在網(wǎng)頁(yè)所占的空間沒(méi)有改變，等于留出了一塊空白區(qū)域，而display:none屬性會(huì)使這個(gè)對(duì)象徹底消失。
4)JS函數(shù)來(lái)實(shí)現(xiàn)DIV高度隨瀏覽器窗口的高度自適應(yīng)變化