在初次尝试高度自适应时都会遇到这样的问题：
对象的heith:100%; 并不能直接产生实际效果
为什么呢？
之所以没有效果,与浏览器的解析方式有一定关系,查看下面代码
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title>一列布局</title> ???????<style> ???????????html, ???????????body { ???????????????margin: 0; ???????????????padding: 0; ???????????????width: 100%; ???????????????height: 100%; ???????????}/*这里是关键*/ ???????????????????????#layout { ???????????????background-color: #cccccc; ???????????????/*border: 2px solid #333333;*/ ???????????????margin: 0 auto; ???????????????width: 80%; ???????????????height: 100%; ???????????} ???????</style> ???</head> ???<body> ???????<div id="layout"></div> ???</body></html>一个对象的高度是否可以使用百分比显示,取决于对象的父级对象.在页面中,#layout 是直接放置在body之中,因此它的父级对象
是body,在默认状态下,浏览器并没有给bodyy一个高度属性,因此我们所设置的#layout为height:100%;并不会产生任何效果.但是
一旦我们给body设置了100%之后,它的子级对象#layout 的height:100%;便发生了作用了,这便是浏览器解析规则引发的高度自适应
问题.
代码中除了给body定义了100%之外,还给html对象也应用了想吐的样式定义,这样做的好处是,使用IE与firefox浏览器都能够实现
高度自适应,IE与firefox对页面对象的解析方式存在一定差异.在IE中,html对象默认为100%的高度，body却不是.而在firefox中,
html标签却不是100%高度,因此我们给两个标签都定义为height:100%;，这样可以保证两款浏览器下均能够正常工作.
注：float元素 空白边不叠加
CSS高度自适应 height:100%;
原文地址：https://www.cnblogs.com/zhangchs/p/9431904.html