宽高自适应

宽高自适应
在网页布局的时候经常要定义元素的宽和高，但很多时候我们希望元素的大小能够根据窗口的大小进行自动调整，这就用到了自适应。

宽高自适应的优点:
元素自适应在网页中是非常重要的，它能够使得网页更加灵活，可以适应在不同的设备不同的窗口和不同的分辨率下显示。

1、宽度自适应
元素宽度设置为100%；（块元素的宽度默认为auto）

2、高度自适应
（1）元素高度自适应窗口的高度
设置方法：html,body{height:100%;}
（2）自适应父元素的高度：
height:100%；
（3）元素具备最小高度自适应
min-height属性：最小高度；（ie6浏览器不识别此属性）

最小高度兼容ie6的写法：
方法一：min-height:数值加单位；height：数值加单位；
方法二：min-height:数值加单位； height:auto!important; height:数值加单位；（属性的顺序不能改变，建议使用这个）

！important关键字过滤器，写在属性值的后面，加上此单词后，元素具有最高的优先级，而ie6不识别此关键字。

min-height(最小高度，设置了此属性后，内容高度小于此高度时，显示此高度；大于容器高度时，容器自适应高度；）

min-height（最大高度，设置了此属性后，内容高度小于此高度时，显示内容高度，内容高度超过此高度时显示此高度。）

min-width（最小宽度，设置了此宽度后，浏览器宽度小于此宽度时显示滚动条，大于此宽度时，适应浏览器宽度。）

max-width（最大宽度，设置了此属性后，浏览器宽度小于此容器时，会适应内容宽度而不显示滚动条。）

下面是用宽高自适应写的整个页面适应浏览器，也就是一屏页面。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>宽高自适应</title>
<style type="text/css">
*{margin:0;padding:0;}
a{text-decoration:none;}
li{list-style:none;}

html,body{height:100%;}
.banner{width:100%;height:84%;}
.banner img{width:100%;height:100%;display:block;}
.nav {width:100%;height:11%;text-align:center;}
.nav p {position:relative;top:42.3%;font-size:14px; }
.nav a{padding:0 2%;color:#343434;}
.foot{width:100%;height:4.7%;text-align:center;background:url(image/tiao.png) repeat-x;}
.foot p {position:relative;top:25%;font-size:12px;color:#b0b0b0;}
.foot p a{color:#b0b0b0;}
</style>
</head>

<body>
    <div class="banner">
        <img src="image/jiankang.png"/>
    </div>
    <div class="nav">
        <p><a href="#">首页</a><a href="#">首页</a><a href="#">首页</a><a href="#">首页</a><a href="#">首页</a><a href="#">首页</a><a href="#">首页</a><a href="#">首页</a><a href="#">首页</a></p>
    </div>
    <div class="foot">
        <p>版权所有：<a href="#">浙江王力门业有限公司</a> &nbsp; 技术支持：<a href="#">派桑网络</a></p>
    </div>
</body>
</html>