您当前位置:图趣网(Tuquu) >> 网页设计教程 >> 移动前端 >> 浏览设计教程

Div中height: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>图趣网[Tuquu]</title>
<style>
html,body{ margin:0px; height:100%;} 
.container { height: 100%;}
.c2{ width:100%; background:#09F; font-size:36px;}
</style>
</head>

<body>
<div class="container c2" >图趣网 www.tuquu.com</div>
</body>
</html>

效果如下:

[教程作者:admin]
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/Tutorial/wd1984.html
10款优秀的CSS代码格式化工具
srcset属性获chrome 34支持
图趣网微信
建议反馈