网站前端制作之htmldiv高度自适应

高度自适应
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。
元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。
1)元素高度自适应窗口高度
设置方法：html,body{height:100%;}
需要自适应的元素：height:100%;
2)自适应元素高度：
父元素：height：value；
需要自适应父元素高度的子元素：height:100%;
height:auto，是指根据块内内容自动调节高度。
height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。
3)浮动元素父元素高度自适应（高度塌陷）
hack1：给父元素添加声明overflow:hidden;
hack2：在浮动元素下方添加空div,并给该元素添加声明：clear:both;height:0;overflow:hidden;font-size:0;
hack3：万能清除浮动法
:after {content:"."; display:block; height:0; visibility:hidden; clear:both;}
*visibility:hidden/visible;隐藏/可见
*visibility:hidden;和display:none;的区别：
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而display:none属性会使这个对象彻底消失。
4)JS函数来实现DIV高度随浏览器窗口的高度自适应变化