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 ...
随机推荐
- git http\https\git免密设置记住用户名和密码的方法
设置记住密码(默认15分钟): git config --global credential.helper cache如果想自己设置时间,可以这样做: git config credential.he ...
- Python开发【第二章】:Python深浅拷贝剖析
Python深浅拷贝剖析 Python中,对象的赋值,拷贝(深/浅拷贝)之间是有差异的,如果使用的时候不注意,就可能产生意外的结果. 下面本文就通过简单的例子介绍一下这些概念之间的差别. 一.对象赋值 ...
- Linux上F上传文件到FTP服务器
Linux上上传跟Windows上上传不一样,在Windows上测试没问题,但是放到Linux服务器上跑,上传的文件中文显示乱码.解决方案: FtpUtil.java红色标记处 package cn. ...
- [翻译] 为什么Uber的数据库从Postgres 切换到 MySql
Uber工程师团队发布了一个重要的博客文章:他们的数据库从Postgres从移动到MySQL.毫不夸张地说,阅读这篇文章是一种享受,特别是因为他们提到这些细节:磁盘格式和那对他们2个数据库的表现的影响 ...
- javascript瀑布流布局效果
- I7-5775C之所以被Intel跳过,是因为本身有太多BUG
说起I7-5775C,第五代酷睿处理器,可能大多数人都没有使用过,也并不清楚他有什么样的特性. 在2015年6月份,我在日本亚马逊买了一个I7-5775C,从此噩梦就开始了(现在已经换了I7-5820 ...
- 思维导图软件MindManager for Windows中如何修改思维导图布局
MindManager for Windows是 Mindjet公司旗下应用于Windows桌面系统的一款思维导图软件,目前已经更新到了v14版本.对于很多刚开始使用MindManager for W ...
- http接口测试——Jmeter接口测试实例讲解
摘要: 最近做的项目需要测试很多接口,上网查一查,发现完整讲述接口测试的资料太少,所以最近自己做完这个项目,把测试的东西整理一下和大家分享一下,希望对看到的人有所帮助 一.测试需求描述 1. ...
- orcale删除重复数据
1.删除orcale重复数据, delete from da_door awhere (a.dt,a.key1) in (select dt,key1 from da_door group by dt ...
- python 学习笔记十二 html基础(进阶篇)
HTML 超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分.网页文件本身 是一种文本文件,通过在文本文件中添加标记符, 可以告诉浏览 ...