DIV的CSS 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">

<head>

<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>

</body>

</html>

显示效果：

这样就ok了。

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot; /&gt;
&lt;title&gt;DIV的CSS height:100%无效的解决办法&lt;/title&gt;
&lt;style&gt;
html,body{ margin:0px; height:100%;} 
.container { height: 100%;}
.c2{ width:100%; background:#09F; font-size:36px;}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div class=&quot;container c2&quot;&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

随机推荐

DIV的CSS height:100%无效的解决办法
在设置DIV高度的时候，会用到一个height:100%的大小，来让div撑满浏览器高度。但是我们会发现，直接在div中写上style:height:100%;是无效的。那么如何才能让div的css height:100%生效呢？解决办法很简单，同时也能适配多个浏览器。方法就是在css当中增加上
CSS改变选中文本背景色和文字颜色
CSS改变选中文本背景色和文字颜色。效果截图：
利用CSS的hover伪类实现的下拉菜单效果
利用CSS的hover伪类实现的下拉菜单效果，未使用任何js代码，简单方便。效果截图：
手机站底部导航条效果自适应手机屏幕大小
手机站底部导航条效果自适应手机屏幕大小代码打包下载：手机站底部导航条效果自适应手机屏幕大小效果截图：
CSS仿Win7对话框黑色阴影效果
CSS仿Win7对话框黑色阴影效果，采用了CSS3的一个新属性，对所有新版本浏览器都支持，老版本的浏览器部分不支持。兼容IE新版、Google浏览器、火狐浏览器，分别对应着三个属性：box-shadow、-webkit-box-shadow、-moz-box-shadow。效果图:

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

相关文章

随机推荐