最新消息:

html中CSS height:100% 无效的问题

Web 观测者 4540浏览

最近在做HTML编程中遇到一个问题,我设置一个DIV的高度为自适应高度,即height:100%,但在浏览器中未生效。示例代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
</head>
<body>
<div class="Iamparent" style="width:206px;">
   <div style="border:1px solid black; width:100px; height:100%; float:left;">中国上海<br/>中国上海<br/>中国上海<br/></div>
   <div style="border:1px solid blue; width:100px; height:100%; float:right;">上海右边</div>
</div>
</body>
</html>

以上代码在浏览器运行效果如下:

我们发现,不管怎么调,右侧的div总不会和左侧的div一样高。

造成这种情况的原因是在页面中引入了如下标准:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

加上这个标准之后问题就来了,你可能是table,也可能是iframe,也可能是div等等,这些标签里的height:100%都失效了。

一种简单的解决方法是直接将上面的标准去除,改为<html>,但这种方式治标不治本。也可以从根本上解决:将left和right的父级div的height修改为100%即可。代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
</head>
<body>
<div class="Iamparent" style="width:206px; height:100%;">
   <div style="border:1px solid black; width:100px; height:100%; float:left;">中国上海<br/>中国上海<br/>中国上海<br/></div>
   <div style="border:1px solid blue; width:100px; height:100%; float:right;">上海右边</div>
</div>
</body>
</html>

运行上述代码之后发现,依然没有解决两侧div高度一致的问题。这是因为父级div的上面仍有父级,即<body>,我们需要将它的height也设置为100%。正确代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<style>
html,body{
   margin:0px;
   height:100%;
}
</style>
</head>
<body>
<div class="Iamparent" style="width:206px; height:100%;">
   <div style="border:1px solid black; width:100px; height:100%; float:left;">中国上海<br/>中国上海<br/>中国上海<br/></div>
   <div style="border:1px solid blue; width:100px; height:100%; float:right;">上海右边</div>
</div>
</body>
</html>

运行以上代码,页面的样式已经修改为我们想要的结果了。至于为什么要这么做,也许标准就是这么规定的吧,上层不做height的100%设置,内部的100%就不管用!
------------------------------------------------------------------------
另一个示例:
在设置DIV高度的时候,用了height:100%,让div撑满浏览器高度。但是我们会发现,直接在div中写上style="height:100%;"是无效的。那么如何才能让div的css height:100%生效呢?解决办法就是在css中加上html, body{ margin:0; height:100%; },这样在div中使用height:100%就能够正常显示了。示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<style>
html,body{
   margin:0px;
   height:100%;
}
.container{
   height: 100%;
   width:100%;
   background:#09F;
   font-size:36px;
}
</style>
</head>
<body>
<div class="container">This is a test!</div>
</body>
</html>

转载请注明:观测者 » html中CSS height:100% 无效的问题