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 ...
随机推荐
- SignalR in a WebSite Project
Question(http://stackoverflow.com/questions/19924678/signalr-in-a-website-project) I have a test we ...
- 浅谈Entity Framework 增删改查和事务操作
1.增加对象 DbEntity db = new DbEntity(); //创建对象实体,注意,这里需要对所有属性进行赋值(除了自动增长主键外),如果不赋值,则会数据库中会被设置为NULL(注意是否 ...
- jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()的区别
body中的onload()和window.onload以及$(document).ready()的区别: 1.前两者都表示当页面加载元素(包括图片等信息)完毕后执行的操作,而且两者在各种浏览器中 ...
- 【五子棋AI循序渐进】——开局库
首先,对前面几篇当中未修复的BUG致歉,在使用代码时请万分小心…………尤其是前面关于VCF\VCT的一些代码和思考,有一些错误.虽然现在基本都修正了,但是我的程序还没有经过非常大量的对局,在这之前,不 ...
- 用Appium进行android自动化测试
appium是开源的移动端自动化测试框架,可以测试ios,android应用.appium让移动端自动化测试不必限定在某种语言和某个具体的框架:也就是说任何人都可以使用自己最熟悉最顺手的语言以及框架来 ...
- JavaScript单元测试框架-Jasmine
Jasmine的开发团队来自PivotalLabs,他们一开始开发的JavaScript测试框架是JsUnit,来源于著名的JAVA测试框架JUnit.JsUnit是xUnit的JavaScript实 ...
- Linux配置SSH免密码登陆
配置环境: 两台centos 6.4虚拟机,/etc/hosts配置如下 192.168.63.128 hadoop001 --master192.168.63.131 hadoop002 --sla ...
- TCP/IP详解--发送ACK和RST的场景
在有以下几种情景,TCP会把ack包发出去: 1.收到1个包,启动200ms定时器,等到200ms的定时器到点了(第二个包没来),于是对这个包的确认ack被发送.这叫做“延迟发送”: 2.收到1个包, ...
- 父目录的权限对子目录有没有影响?[Linux]
问题源头: 登录到服务器(实验室分的一个服务器账号)上,想在当前目录下创建一个文件,但提示“文件系统只读”,无法创建文件.通过ls -l 查看当前用户在当前目录的权限,发现具有rwx权限.所以在想会不 ...
- 非空二叉树的一个有趣的性质:n0 = n2 + 1
对任何非空二叉树T,若n0 表示叶结点的个数.n2 表示度为2 的非叶结点的个数,那么两者满足关系n0 = n2 + 1. 这个性质很有意思,下面我们来证明它. 证明:首先,假设该二叉树有N 个节点, ...