首页 新闻 会员 周边

html5中的css样式height:100%,似乎不起作用，求解

1
[已解决问题] 解决于 2014-08-22 18:20

html5中的css样式height:100%,似乎不起作用，求解

源码：

<!DOCTYPE HTML>
<html>
<style type="text/css">
#main{width:100%;height:100%;background-color:red;}
</style>
<body>
<div id="main">
55515
</div>
</body>
</html>

北在北方的主页 北在北方 | 初学一级 | 园豆：180
提问于：2014-08-22 17:19
< >
分享
最佳答案
-1

跟html5没关系。

height为100%时，必须有父容器，然后自动设置高度为父容器的高度。

早期的版本里，table是支持100%高度的（现在要显式的在html里设置doctype来达到目的）。

奖励园豆：5
519740105 | 大侠五级 |园豆：5810 | 2014-08-22 17:28

那我应该怎么改，如果继续用html5的话（开头是<!DOCTYPE HTML>浏览器就认为是HTML5没错吧）？

北在北方 | 园豆：180 (初学一级) | 2014-08-22 17:36

@北在北方: 不建议使用老版本的doctype来达到高度100%的目的。

网络有一个方案，可以把div的高度填充满浏览器：

<html>
<head>
<style>
body{height:100%; overflow:hidden; margin:0px; padding:0px;}
.box {height:100%; background:#ff0000; position:absolute; width:100%;}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

当然，还有别的方案也能达成这个目标。

519740105 | 园豆：5810 (大侠五级) | 2014-08-22 17:43

@519740105: 经测试在firefox中，给body元素设定高度时，使用百分比的值没有效果。

sikla | 园豆：27 (初学一级) | 2014-08-22 17:48

@519740105: 为什么在开头声明<!DOCTYPE HTML>的时候需要position:absolute才能使height:100%起作用？能否解释一下.

北在北方 | 园豆：180 (初学一级) | 2014-08-22 17:57

@北在北方: 这个我也是度娘出来的。

有个方案可以不这样，好像是给div设置一个绝对大的margin，然后在处理，具体的忘记了，可能要到星期一才能找到那段代码了。

519740105 | 园豆：5810 (大侠五级) | 2014-08-22 18:01

@519740105: 谢谢，你的回答很有效，最后一个问题

声明使用HTML5是不是仅仅需要<!DOCTYPE HTML>

还是说有什么更明确的声明方式？

北在北方 | 园豆：180 (初学一级) | 2014-08-22 18:05

@北在北方: 这样申明后能在支持浏览器能支持的最新HTML版本。

519740105 | 园豆：5810 (大侠五级) | 2014-08-22 18:08
其他回答(1)
0

给body加个固定高度试试。

sikla | 园豆：27 (初学一级) | 2014-08-22 17:37
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。