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%设定

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

  2. 关于div宽度和高度的100%设定

    设置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. 相册 垂直居中; 水平居中. 1)宽度 大于高度, 宽度 100%; 2) 高度 大于 宽度 , 高度100%; getimagesize , list --->line-height , text-align, vertical-align, max-height, 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:100%设置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. Android开发之Intent略解

    Intent是一种运行时绑定(run-time binding)机制,它能在程序运行过程中连接两个不同的组件.通过Intent,你的程序可以向Android表达某种请求或者意愿,Android会根据意 ...

  2. Ubuntu 14.04 升级gcc 4.8到gcc 5.x

    简介 有些软件比较新,需要更高的gcc版本,所以需要升级gcc.编译安装比较耗时,所以直接选择bin包就好. 步骤 添加源 sudo add-apt-repository ppa:ubuntu-too ...

  3. Mybatis 与 spring mvc

    本文是用来小结一下自己mybatis 和spring mvc 学习过程. 在写的过程中发现 http://www.phperz.com/article/15/0127/48684.html 这篇文章里 ...

  4. 如何查看JDK以及JAVA框架的源码

    如何查看JDK以及JAVA框架的源码 设置步骤如下: 1.点 “window”-> "Preferences" -> "Java" -> &q ...

  5. [原创]NDT方法在SLAM中的应用

    NDT概念 正态分布变换(Normal Distribution Transformation , NDT)概率密度函数( Probability Density Function, PDF)Firs ...

  6. Java jdbc 连接oracle

    import java.sql.Connection; import java.sql.Driver; import java.sql.DriverManager; import java.sql.S ...

  7. lighttpd与fastcgi+cgilua原理、代码分析与安装

    原理 http://www.cnblogs.com/skynet/p/4173450.html 快速通用网关接口(Fast Common Gateway Interface/FastCGI)是通用网关 ...

  8. rosetta common sh: mpiCC command not found解决方法

    在执行多线程编译rosetta时执行: python scons.py bin mode=release extras=mpi -j8 编译安装rosetta 会出现错误sh: mpiCC comma ...

  9. Android -- 仿ios上下反弹效果

    1,前几天在一个app上看到了滑动反弹效果,觉得这个效果挺不错的,然后想自己来实现一下,在网上查了一下基本上都是大致的说了下思路,自己看了一下,决定把实现的思路来详细的写下来,先看一下我们实现的效果吧 ...

  10. AJAX-----05XMLHttpRequest对象的用post方式进行ajax请求

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...