CSS 中的宽高自适应

什么是自适应

不同大小设备呈现同样的页面效果，只是文字、图片等的大小不一样，但是相对位置一样

CSS 中的宽高

宽高的默认值

宽度的默认值100%，就是和父级元素等宽
高度的默认值auto，将由它的子元素的高来决定，也就是说会子元素会撑开父级元素

宽高的最值

宽度的最大值 max-width
宽度的最小值 min-width
高度的最大值 max-height
高度的最小值 min-height
注意：IE6及以下版本不识别该组属性

微信聊天案例

宽高的自适应

1、非浮动元素的父元素高度自适应
    不设置高度，高度默认由子元素内容撑开 height: auto;
    通过最小高度实现高度自适应 min-height:___px;

    height: auto; min-height:___px;

2、浮动元素的父元素高度自适应（触发BFC）

设置全屏页面

html,body {
    height: 100%;
}