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 ...
随机推荐
- sql cross join table
A 表数据如下图所示 B表数据如下图所示
- 突然出现 -bash: pod: command not found 的解决方法
$ mkdir -p $HOME/Software/ruby $ export GEM_HOME=$HOME/Software/ruby $ gem install cocoapods [...] g ...
- LeetCode Kth Largest Element in an Array
原题链接在这里:https://leetcode.com/problems/kth-largest-element-in-an-array/ 题目: Find the kth largest elem ...
- ubuntu安装eclipse配置jdk环境
$ sudo mkdir /usr/local/java //在此目录下新建一个文件夹java $ sudo mv 下载/jdk-8u111-linux-i586.tar.gz /usr/local/ ...
- ASP.NET MVC URL重写与优化(1)-使用Global路由表定制URL
ASP.NET MVC URL重写与优化(1)-使用Global路由表定制URL 引言--- 在现今搜索引擎制霸天下的时代,我们不得不做一些东西来讨好爬虫,进而提示网站的排名来博得一个看得过去的流量. ...
- MVC 移除复数表名的契约
在数据库上下文中添加: using System.Data.Entity.ModelConfiguration.Conventions; protected override void OnModel ...
- 《zw版·Halcon-delphi系列原创教程》简单的令人发指,只有10行代码的车牌识别脚本
<zw版·Halcon-delphi系列原创教程>简单的令人发指,只有10行代码的车牌识别脚本 简单的令人发指,只有10行代码的车牌识别脚本 人脸识别.车牌识别是opencv当中 ...
- Robotium自动化测试框架实用教程(图)
一.简介 Robotium是一款国外的Android自动化测试框架,主要针对Android平台的应用进行黑盒自动化测试,它提供了模拟各种手势操作(点击.长按.滑动等).查找和断言机制的API,能够对各 ...
- winform插件机制学习
这两天在看自定义控件,原来有太多知识没有掌握.今天看到插件机制,心里突然一亮,这个东西听了不少次,就是不知道是啥回事.这次有幸书里包含一个案例,我就跟着它一步步来.终于知道是什么回事了.这个应该在软件 ...
- innodb的表最大限制
相信大多数人都不知道,innodb的表最大限制为64TB,但是why? Each space is divided into pages, normally 16 kib each (this can ...