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当中增加上
手机站底部很好看的导航条效果
手机站底部很好看的导航条效果，采用了html5的一些新特性，拨打电话图片呈现动态效果。代码打包下载：手机站底部很好看的导航条效果效果截图：
CSS改变选中文本背景色和文字颜色
CSS改变选中文本背景色和文字颜色。效果截图：
利用CSS的hover伪类实现的下拉菜单效果
利用CSS的hover伪类实现的下拉菜单效果，未使用任何js代码，简单方便。效果截图：
CSS blockquote美化效果
blockquote相信大家都不陌生吧，在Word叫文本框，其实在网页了可叫它文本框吧，如果在一段文本的两头加上blockquote标签的话，那么文本将会接出来显示，而且其内的文本将含有blockquote的格式，所以只要用CSS定义好了blockquote的各个属性，你会发现这会是个

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

相关文章

随机推荐