DIV的CSS height:100%无效的解决办法

查看演示效果

在设置DIV高度的时候,会用到一个height:100%的大小,来让div撑满浏览器高度。但是我们会发现,直接在div中写上style:height:100%;是无效的。 那么如何才能让div的css height:100%生效呢?解决办法很简单,同时也能适配多个浏览器。 方法就是在css当中增加上

在设置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=gb2312" />

<title>DIV的CSS height:100%无效的解决办法</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"></div>

</body>

</html>

显示效果:

这样就ok了。

所属频道:CSS特效/更新时间:2015-01-20
相关CSS特效
@2014 www.120muban.com模板库