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;

随机推荐

CSS blockquote美化效果
blockquote相信大家都不陌生吧，在Word叫文本框，其实在网页了可叫它文本框吧，如果在一段文本的两头加上blockquote标签的话，那么文本将会接出来显示，而且其内的文本将含有blockquote的格式，所以只要用CSS定义好了blockquote的各个属性，你会发现这会是个
常用CSS重置代码
CSS重置(CSS reset),也就是重置默认样式。在不同浏览器，HTML中标签的默认样式有一个默认属性值，渲染出来的效果不尽相同，我们在写css页面的时候，为了避免在css中重复定义它们，我们需要重置默认样式，以方便统一，从而提高开发效率，提高样式代码的重用，
手机站头部超赞QQ邀请效果
手机站头部超赞QQ邀请效果，已整理为JS调用代码，方便直接引入网页调用。打包下载：手机站头部超赞QQ邀请效果效果截图：
手机站常用的底部导航条，宽度自适应
手机站常用的底部导航条，宽度自适应。代码打包下载：手机站常用的底部导航条，宽度自适应效果截图：
纯CSS实现的二级菜单
纯CSS实现的二级菜单，完全采用CSS样式来实现的，为添加任何JS代码。主要利用了CSS伪类hover来实现的，代码简单容易理解。相比较采用JS或者jQuery库实现的二级菜单，代码量极少。效果截图：

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

相关文章

随机推荐