div或body的css样式height:100%失效

原创 2013年12月03日 15:19:43

在前端设计中常常会遇到这样的问题:如何让容器高度100%填充整个body。大家都知道简单的给div定义一个height:100%是没有效果的,其实不然。下面我们来分析一下原因:CSS属性是有继承性的,而百分比都又是相对的,那么height:100%就是相当于容器父级而言的。所以并不是这个高度100%没有效果,只是没有达到我们预期的效果,我们理解上的错误。


理解了高度100%的意义,剩下的就简单了,给body一个100%高度即可。


html, body {height: 100%;}
#container {height: 100%;}

或者:

html, body {height: 100%;}
#container {min-height: 100%;}
* html #container {height: 100%;}



相关文章推荐

updatepanel更新dropdownlist后其css样式失效的解决方案

我是一个后台小白程序猿,前台懂得很少,最近遇到了这个问题:updatepanel更新dropdownlist后其css样式失效 updatepanel更新dropdownlist后其css样式失...

CSS样式字体设置失效,呈现乱码

1.问题: CSS文件中已设置了标签的属性font-family:"微软雅黑",但是字体的显示的效果却是宋体,查看一下网页源代码,发现设置的字体为乱码。 乱码显示如font-family:"΢��...

ie6下CSS样式失效时如何进行调试

1)首先要确定是哪个样式名出了问题。      可以通过ie8下的F12功能或FF的fireBug或其它的辅助工具来准确定位到正常显示模式下的样式名。也可通过更改样式名或ID名来检验是否是当前的样式...

ios加载本地html,css样式失效问题

项目中需要加载本地的html,在添加到工程中时,发现不显示本地的资源图片文件,而且样式也跟浏览器打开的不一样。初步判断是资源路径读取的问题。 鉴于iOS沙盒机制的问题,这些资源文件在编译过程中,...

DIV+CSS样式---网易盖楼

网易的评论样式做的好,我天天盖楼,x
  • qqHJQS
  • qqHJQS
  • 2014年08月26日 15:54
  • 1338

论为什么页面中要使用html,body {height: 100%;}

div的100%是从其上一级div的宽高继承来的,有一点很关键,就是要设置div100%显示,必须设置其上一级div的宽度或高度,否则无效。前面总得有个容器说明他的高度是多少。这样的话div才能按比例...

IE6支持max-height、min-height CSS样式

让IE6支持max-height、让IE6支持min-height样式属性方法教程 我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定一定高度范围值,有时也需要设置一个最小高度值,以达...

div li隔行变色 鼠标悬浮高亮显示 jquery控制css样式

$("table tr").eq(1).remove();              //删除第一行数据 $("#tbl1").find("tr").eq(0).remove();  //删除第一行数...

css样式之页面上拉指定div置顶

最近做项目写页面用到一个功能效果——–>当页面滑动过程中,如果标题部分已经到顶部了,那么标题部分就应该被置顶而不是随着页面内容而消失。完成这种效果只要两步: 1.获取窗体Y轴滚动事件,来获取...

谈DIV+CSS样式表命名的规则方法

刚开始写DIV+CSS样式表的时候,是记不住那些CSS样式的属性,但是在逐渐熟悉后,发现给DIV+CSS样式表命名也是一件头疼的事情,本文将介绍一些相关的规则方法供大家参考。 AD: ...
  • kacoro
  • kacoro
  • 2011年10月29日 04:32
  • 249
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:div或body的css样式height:100%失效
举报原因:
原因补充:

(最多只允许输入30个字)