div的100%是从其上一级div的宽高继承来的,所以必须设置其上一级div的宽度或高度,否则无效。

举例说明:父div(deman)宽300高200,子div(cc)如果在这个条件下设置divcc的宽高都为100%的话,那cc的确切大小就是父div的大小(宽300高200),在尝试中你会发现,div显示会受自身和其上一级div的padding和margin影响,而其实际宽高不受影响。值得玩味噢!

浏览器一般默认解释为内容的高度,而不是100%。但是只要为html和body设置高度为100%就可以了:html,body{height:100%;},这样之后div会按比例来继承上一级的高度了,仅仅设置的DIV元素的height属性貌似没有什么效果。

那么,如下的样式可以设置Div撑满整个页面:

<style type="text/css">
html
{
height:%;
margin:;
}
body
{
height:%;
margin:;
}
</style> <div style="height:100%; z-index:1">
</div>

有一点需要注意的是,Html级元素默认宽度是100%,即整行;但是高度并不是100%,而仅仅是一行而已。

所以要想实现撑满整个页面,必须显式地设置高度为100%!

Div的宽度与高度的100%设定的更多相关文章

  1. 关于Div的宽度与高度的100%设定

    http://www.cnblogs.com/clare-zhang/archive/2011/08/26/2154220.html 正像你所知道的那样,设置DIV大小的有两个属性width和heig ...

  2. 关于div宽度和高度的100%设定

    设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明白这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承 ...

  3. 用伪类实现一个div的宽度和高度是固定百分比

    遇到一个题目:一个div宽度是固定百分比的情况下,如何设置高度是宽度的80% 看到题目的第一反应是用js控制,获取到div的宽度之后再用宽度的80%来设置div的高度,但是如何在不用js的情况下,只用 ...

  4. CCS进阶——div的宽度和高度是由什么决定的?

    核心知识 文档流/普通流(Normal Flow) 内联元素的宽高(高度是由行高决定的,宽度=内容+border+marging+padding) 块级元素的宽高(高度是内部文档流元素的高度总和,宽度 ...

  5. 调用jquery的resize方法改变div的宽度和高度在IE中不变,在谷歌中可以正常显示

    1.jquery代码: 1.1问题的版本: $(function() { haituheight(); $(window).resize(function(){ haituheight(); }); ...

  6. 相册 垂直居中; 水平居中. 1)宽度 大于高度, 宽度 100%; 2) 高度 大于 宽度 , 高度100%; getimagesize , list --->line-height , text-align, vertical-align, max-height, max-width

    一: 效果: 1) 黑色 部分是 相框. 2) 图片 要实现 水平居中, 垂直居中 3) 如果 宽度 大于 高度 ,那么 宽度 100% ,如图1 , 高度 自适应 ,同时不能超过黑色相框的 高度 ; ...

  7. 设定网页最小最大宽度和高度(兼容IE6)

    http://www.cnblogs.com/double-bin/archive/2011/12/19/2293093.html /* 最小寬度 */ .min_width{min-width:30 ...

  8. 如何让div中的span垂直居中 ----height:100%设置div的高度

    如果div中只有一个span一个元素,可以使用line-height.如果div中还有其他元素,可以设置span的css如下: .span{ position: absolute; top: 50%; ...

  9. jquery动态改变div宽度和高度

    效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

随机推荐

  1. mac svn 更新到新版本1.8

    1.执行:brew install scons 如果没装brew,先装它.安装命令如下:curl -LsSf http://github.com/mxcl/homebrew/tarball/maste ...

  2. DHCP Set Hostname

    参考: FreeBSD DHCP Set Hostname ( Empty Hostname After Reboot ) -- http://www.cyberciti.biz/faq/freebs ...

  3. winform最小化后隐藏到右下角,单击或双击后恢复 .

    01.//先拖一个notifyIcon控件进来 02. 03.//然后在您的notifyIcon控件中添加 MouseDoubleClick事件,代码如下 04. 05. private void n ...

  4. 判断日期是否符合yyyy-mm格式

    !Regex.IsMatch(dr["DMAKEDATE"].ToString(),@"^(?<year>\\d{2,4})-(?<month>\ ...

  5. IntelliJ IDEA全文搜索很给力

  6. 读源码之RESideMenu

    RESideMenu是github上比较出名的一个开源库,主要是实现侧滑菜单,现在有三千多个star了.效果如下.   据说创意来源于dribbble的一个设计,还是比较好看的.感兴趣的可以去gith ...

  7. 设置SQLServer的行版本控制隔离级别

    1.--查询数据库状态 select name,user_access,user_access_desc,snapshot_isolation_state,snapshot_isolation_sta ...

  8. 事务复制-大批量DEL操作

    同事讨论删除发布表历史记录,导致订阅端数据滞后N小时.后来询问得知,发布表T只保留最近31天的数据,每天由Job删除31天前的数据,每天的删除量约400-500万条.默认情况下,在发布端删除400万条 ...

  9. pepperflash

    sudo apt-get install pepperflashplugin-nonfree sudo update-pepperflashplugin-nonfree --install

  10. bzoj2251 [2010Beijing Wc]外星联络

    因为n很小,所以对于串s的每一个后缀,都把其加入字典树中,并且经过一个字典树节点,该节点权值就+1. 输出时因为要字典序最小,所以字典树先走0分叉,再走1分叉,如果节点权值大于等于2就输出 代码 #i ...