浅谈宽高自适应

浅谈宽高自适应

在网页布局中，我们通过设置元素的宽高定义元素的显示大小，但是，在不同窗口大小，不同分辨率下，宽高相同的元素显示状况是不同的。所以，我们往往需要元素的大小能够根据窗口或子元素自动调整，这就是pc自适应。

一、相对窗口和父元素的宽度自适应

两种方法：
1、不设置宽度；
2、width：100%；
在不设置宽度时，块元素的宽度（width）的值默认为100%，即父元素的宽度的100%，也就是块元素继承父元素的宽度。
注意： 默认情况下，如果给块元素加了绝对定位或者固定定位，他的宽度就不再是100%显示了，也不会跟父元素同宽的，而是跟里面的内容同宽，如果元素里面没有内容，也没有定义宽高，这个时候，元素就不见了。

二、高度自适应

（一）、相对窗口和父元素的自适应

首先，与宽度不同，高度在不设置时，是与元素里的内容同高的！
但是，这里我们依然可以用设置百分比值的方法，让元素与父元素同高，即height：100%；
前提是父元素有高度！！！
所以，我们在设置元素高度相对于窗口自适应的时候，需要给元素的“祖先级”父元素body和body的父元素HTML设置高度，即

html,body{height:100%;}  
（全屏显示的页面必须要给 html,body设置高度100%）

注：百分比设置宽高的时候，都是相对当前元素最近的父元素显得的百分比的值(即百分比这个值显示大小的参照物就是自己最近的父元素)。

（二）相对元素或内容自适应

1、不设置高度，或者高度设置成：height：auto；
前面提到，高度在不设置时，元素是与元素里的内容同高的。而auto是自由值的意思。
2、通过最小高度实现高度自适应 ：

min-height：value;
_height：value; 
/* value为某个数 */

min-height属性表示最小高度的意思，当元素内容的高度小于最小高度时，元素的高度以最小高度的值显示；当元素内容的高度大于最小高度时，元素的高度随内容高度变化而变化。
需要注意的是，IE6浏览器不识别min-height属性，且将height属性识别为最小高度属性，默认元素高度与内容同高。因此，我们通过下划线过滤器“_”设置一个专门给IE6识别的属性，即

_height：value;
/* 加了下划线过滤器之后，只有IE6 这个浏览器识别当前的属性，其他浏览器就都不识别。*/

这里我们也可以用！import 来辅助设置元素高度。
3、给需要高度自适应的元素添加这些属性：

min-height：value;  
height：auto !important；
height：value; 
/* 逆战班，与你同行。 */

!important；为关键字过滤器，具有最高优先级，且IE6不支持。所以，IE6浏览器会自动过滤前两条程序，只执行第三条；而其他浏览器会执行前两条程序，不会执行第三条。

附：以上元素高度相对内容自适应并没有考虑浮动情况，当第一级子元素浮动后，父元素高度会塌陷。所以，我们需要专门讨论。