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
时间： 2024-10-13 00:14:27