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实现的二级菜单
纯CSS实现的二级菜单，完全采用CSS样式来实现的，为添加任何JS代码。主要利用了CSS伪类hover来实现的，代码简单容易理解。相比较采用JS或者jQuery库实现的二级菜单，代码量极少。效果截图：
不错的CSS重置代码base.css
今天发下我自己的 css 框架base.css，作用是重设浏览器默认样式和提供通用原子类。使用方法：直接将以上文本框中的CSS代码全选复制保存为base.css文件，在网页中引用即可。来源：http://www.cnblogs.com/yjzhu/archive/2012/11/05/2755095.html
JS+CSS简单实现DIV遮罩层显示隐藏
Copy上面的代码到HTML页面即可查看效果。原理比较简单，就是在页面内先定义好需要显示的DIV和遮罩层的CSS,然后用在onclick事件时，通过JS去控制两个DIV的样式：display=block or display=none.就可以实现DIV的显示和隐藏。注意两个DIV的z-index，显示在最
CSS改变选中文本背景色和文字颜色
CSS改变选中文本背景色和文字颜色。效果截图：

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

相关文章

随机推荐