标签：
height:100%不起作用怎么办:
有时候给一个元素设置height:100%，希望能够实现高度自适应，但是往往不能够实现我们的效果。
下面先看一个例子:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title> <style type="text/css"> #content { width:200px; margin:0px auto; text-align:center; background-color:red; height:100%; } </style> </head> <body> <div id="content">蚂蚁部落欢迎您</div> </body> </html>
以上代码中，尽管在div中设置了height:100%，但是还是没有实现高度自适应效果，高度依然是字体的高度。
之所以出现这样的原因，是因为百分比高度必须要以父级元素为参考对象，但是body在默认状态下，浏览器并没有给它高度，所以div设置的高度height:100%并不会有任何的作用，下面将代码修改如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title> <style type="text/css"> html,body { margin:0px; height:100%; } #content { width:200px; margin:0px auto; text-align:center; background-color:red; height:100%; } </style> </head> <body> <div id="content">蚂蚁部落欢迎您</div> </body> </html>
在以上代码，添加了以下代码就实现了高度自适应效果:
html,body { margin:0px; height:100%; }
在以上代码中，同时将html和body的高度设置为100%,这是为了兼容IE和火狐浏览器，因为在IE中html的默认高度100%，而body不是。在火狐浏览器中html标签的高度不是100%，通过这样的设置，在所有的浏览器都会表现正常了。
原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0525/2442.html
最为原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9620
标签：
原文地址：http://www.cnblogs.com/come-on/p/4765269.html
