Div的宽度与高度的100%设定
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%设定的更多相关文章
- 关于Div的宽度与高度的100%设定
http://www.cnblogs.com/clare-zhang/archive/2011/08/26/2154220.html 正像你所知道的那样,设置DIV大小的有两个属性width和heig ...
- 关于div宽度和高度的100%设定
设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明白这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承 ...
- 用伪类实现一个div的宽度和高度是固定百分比
遇到一个题目:一个div宽度是固定百分比的情况下,如何设置高度是宽度的80% 看到题目的第一反应是用js控制,获取到div的宽度之后再用宽度的80%来设置div的高度,但是如何在不用js的情况下,只用 ...
- CCS进阶——div的宽度和高度是由什么决定的?
核心知识 文档流/普通流(Normal Flow) 内联元素的宽高(高度是由行高决定的,宽度=内容+border+marging+padding) 块级元素的宽高(高度是内部文档流元素的高度总和,宽度 ...
- 调用jquery的resize方法改变div的宽度和高度在IE中不变,在谷歌中可以正常显示
1.jquery代码: 1.1问题的版本: $(function() { haituheight(); $(window).resize(function(){ haituheight(); }); ...
- 相册 垂直居中; 水平居中. 1)宽度 大于高度, 宽度 100%; 2) 高度 大于 宽度 , 高度100%; getimagesize , list --->line-height , text-align, vertical-align, max-height, max-width
一: 效果: 1) 黑色 部分是 相框. 2) 图片 要实现 水平居中, 垂直居中 3) 如果 宽度 大于 高度 ,那么 宽度 100% ,如图1 , 高度 自适应 ,同时不能超过黑色相框的 高度 ; ...
- 设定网页最小最大宽度和高度(兼容IE6)
http://www.cnblogs.com/double-bin/archive/2011/12/19/2293093.html /* 最小寬度 */ .min_width{min-width:30 ...
- 如何让div中的span垂直居中 ----height:100%设置div的高度
如果div中只有一个span一个元素,可以使用line-height.如果div中还有其他元素,可以设置span的css如下: .span{ position: absolute; top: 50%; ...
- jquery动态改变div宽度和高度
效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...
随机推荐
- resx文件在X64位编译,提示“未能加载文件或程序集”的问题?
原文:resx文件在X64位编译,提示"未能加载文件或程序集"的问题? resx文件在X64位编译,提示"未能加载文件或程序集"的问题? 解答: 错误现象如下 ...
- Python常用模块之sys
Python常用模块之sys sys模块提供了一系列有关Python运行环境的变量和函数. 常见用法 sys.argv 可以用sys.argv获取当前正在执行的命令行参数的参数列表(list). 变量 ...
- 如何查看JDK以及JAVA框架的源码
如何查看JDK以及JAVA框架的源码 设置步骤如下: 1.点 “window”-> "Preferences" -> "Java" -> &q ...
- English随笔1
英语中的基本五大句型 1.Subject (主语) + Verb (谓语) Li Ming works The accident happened 2.Subject (主语) + Link. V( ...
- ios 实现版本更新检查
注:这里网络请求用的是第三方框架:SVHTTPRequest /* 第一步: 根据应用名称搜索应用,然后根据应用绑定的ID在结果中筛选出我们要找的应用,并取出应用的AppID */ - (void)g ...
- DuiLib学习笔记2——写一个简单的程序
我们要独立出来自己创建一个项目,在我们自己的项目上加皮肤这才是初衷.我的新建项目名为:duilibTest 在duilib根目录下面有个 Duilib入门文档.doc 我们就按这个教程开始入门 首先新 ...
- Postgres Plus Advanced Server installation
# setenforce Permissive # ./ppasmeta-9.3.1.3-linux-x64.run --mode text Installation Directory [/opt/ ...
- [CrunchBang]tint2默认设置
#--------------------------------------------- # TINT2 CONFIG FILE #-------------------------------- ...
- GridView----CustomRowCellEdit 使用注意事项
当你在Grid和TreeList中,需要对不同的行中的某一个单元格(Cell)提供特定的RepositoryItem时,使用CustomRowCellEdit 绝对能胜任, 但在使用时千万要注意了:“ ...
- Spring aop报错:com.sun.proxy.$Proxy cannot be cast to xxx
准备使用AOP记录所有NamedParameterJdbcTemplate操作数据时的所有日志,没想到出现这个错误,折腾了好久,终于找出原因 解决方案:在 aop-config配置添加上: proxy ...