Div的宽度与高度的100%设定

时间:2022-08-31 20:44:39

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&percnt;设定

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

  2. 关于div宽度和高度的100&percnt;设定

    设置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. 相册 垂直居中&semi; 水平居中&period; 1&rpar;宽度 大于高度&comma; 宽度 100&percnt;&semi; 2&rpar; 高度 大于 宽度 &comma; 高度100&percnt;&semi; getimagesize &comma; list ---&gt&semi;line-height &comma; text-align&comma; vertical-align&comma; max-height&comma; 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&colon;100&percnt;设置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. 使用CSS3 Media Queries实现网页自适应

    原文来源:http://webdesignerwall.com 翻译:http://xinyo.org 当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不 ...

  2. ASP&period;NET MVC Web API Post FromBody(Web API 如何正确 Post)

    问题场景: ASP.NET MVC Web API 定义 Post 方法,HttpClient 使用 JsonConvert.SerializeObject 传参进行调用,比如 Web Api 中定义 ...

  3. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Packet for query is too large&lpar;1767212 &gt&semi; 1048576&rpar;mysql在存储图片时提示图片过大

    原网址:http://blog.csdn.net/bigbird2012/article/details/6304417 错误现象:Packet for query is too large(1767 ...

  5. iOS 使用证书时遇到的错误一

    证书概念: 那么现在就牵扯到几个名词,Development证书,aps_Development证书(推送证书),测试描述文件,AppID,同理也就有Distribution证书,aps_Distri ...

  6. 树形dp汇总

    HDU 1520 HDU 2196 Codeforces 219D POJ 1155

  7. C&num; 两行代码实现 延迟加载的单例模式(线程安全)

    关键代码第4,5行. 很简单的原理不解释:readonly + Lazy(.Net 4.0 + 的新特性) public class LazySingleton { //Lazy singleton ...

  8. C&plus;&plus;标准转换运算符const&lowbar;cast

    前面讲了C++继承并扩展C语言的传统类型转换方式,最后留下了一些关于指针和引用上的转换问题,没有做详细地讲述.C++相比于C是一门面向对象的语言,面向对象最大的特点之一就是具有“多态性(Polymor ...

  9. Git - 常用技能

    参考: http://wuchong.me/blog/2015/03/30/git-useful-skills/

  10. &lpar;转&rpar;maven设置内存

    Windows环境中 找到文件%M2_HOME%\bin\mvn.bat ,这就是启动Maven的脚本文件,在该文件中你能看到有一行注释为: @REM set MAVEN_OPTS=-Xdebug - ...