div 设置相对比例 即div width 100 无效
正像你所知道的那样，设置DIV大小的有两个属性width和height，以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑，不明确这个100%的宽度（高度）到底有多宽有多高？这个100%是从哪里得到的从哪里继承的？今天我们的话题就是有关div高度100%的问题！
其实，要弄懂div宽度|width100%、div高度|height100%到底是怎么实现的，只需弄懂一个简单的问题就可以了，即100%的基数是谁，就是这个100%是相对于谁的width、height来说是100%？
div的100%是从其上一级div的宽高继承来的，有一点很关键，就是要设置div100%显示，必须设置其上一级div的宽度或高度，否则无效。举例说明：父div(deman)宽300高200，子div(cc)如果在这个条件下设置divcc的宽高都为100%的话，那cc的确切大小就是父div的大小(宽300高200)，在尝试中你会发现，div显示会受自身和其上一级div的padding和margin影响，而其实际宽高不受影响。值得玩味噢！
你设div的高度为100%,那么它是和什么地方相对为100%?
前面总得有个容器说明他的高度是多少。这样的话div才能按比例100%继承上一级的高度。可惜的是浏览器一般默认解释为内容的高度，而不是100%。但是只要为html和body设置高度为100%就可以了：html,body{height:100%;}，这样之后div会按比例来继承上一级的高度了，仅仅设置的DIV元素的height属性貌似没有什么效果。
同时，让人高兴的是，这样设置的css样式不存在浏览器兼容问题，在IE5.5、IE6、IE7、IE8还有火狐均可正常显示。
那么，如下的样式可以设置Div撑满整个页面：
<style type="text/css">
html
{
height:100%;
margin:0;
}
body
{
height:100%;
margin:0;
}
</style>
<div style="width:100%; height:100%; background-color:#666; z-index:1">
</div>
有一点需要注意的是，Html级元素默认宽度是100%，即整行；但是高度并不是100%，而仅仅是一行而已。
所以要想实现撑满整个页面，必须显式地设置高度为100%！
div 设置相对比例 即div width 100 无效相关推荐
- html width 100 无效,html css 样式中100%width 仍有白边解决办法
Linux服务器中木马(肉鸡)手工清除方法 由于自己也碰到过这种情况,刚好看到这篇文章,先转载过来.的确蛮有用的哦. 首先剧透一下后门木马如下: (当然这是事后平静下来后慢慢搜出来的,那个时候喝着咖啡 ...
- div设置overflow-scroll滚动之后，jq获取其子元素的offset.top出现问题。
先上个图: 布局很简单,左右超过屏幕的部分自行滚动. 1. html <div class="ce-container"><div class="ce- ...
- HTML里子DIV设置margin-top后影响父DIV位置的解决办法
在HTML里,子DIV元素设置了margin-top后,在与父元素之间没有任何其他元素的情况下,会影响到父DIV的位置. 一.编写代码. <!DOCTYPE html> <html ...
- html设置页面大小始终100%,css width 100% 宽度百分之百设置与不设置
css宽度百分之百设置与不设置 css width可以设置具体固定数值比如10px.500px.980px.1200px等,以达到网页固定宽度显示.css 宽度 width也可以设置百分比值,比如80 ...
- 大div套多个小div，怎样设置外div的高度自适应？
在最后一个div 后面加上 overflow:hidden;如下: <div style="width:580px; height:auto; margin:0 auto; <d ...
- div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
在设置了元素宽度width100%后再加上margin和padding超出父元素宽度,其实解决的方法很简单,直接使用CSS的 box-sizing 属性就可以解决这个问题,这个是CSS3新属性,可以将 ...
- 解决div宽度设置width:100%后再设置padding或margin超出父元素的办法
前言: 有时候我们需要子div和父div一样宽(高),但是需要设置一定边距时,如果子元素使用width:100%在设置padding或margin的话,就会出现溢出问题. HTML <div c ...
- html不能超出div的宽度,DIV设置width后超出父元素应该如何解决
这次给大家带来DIV设置width后超出父元素应该如何解决,解决DIV设置width后超出父元素的注意事项有哪些,下面就是实战案例,一起来看一下. 前言 本文介绍的是利用CSS3的新属性box-siz ...
- div高度设置100%无效的问题 （亲身实践）
先上我的项目效果图: 这是没有加高度的 这是加了高度的 今天写页面碰到了一个问题,div设置高度100%无效,于是进行检查.首先想到的是div父容器没有高度,于是检查父容器高度,通过谷歌开发者工具发 ...
最新文章
- 【Python】百度首页GIF动画的爬虫
- AlarmManager机制和系统唤醒锁的总结
- .Net Core下通过Proxy 模式 使用 WCF
- docker命令及挂载
- ubuntu 命令记忆
- 新格局初现、新玩家加入、新融资升温，2017年数据库领域有点热闹
- php 松散耦合,PHP依赖注入和松散耦合
- 计算机质量检测技术,计算机技术在建材质量检测中的应用分析
- 医院管理系统(Java)
- js调用qq互联api实现第三方登录
- CSI-RS接收流程
- TI FMCW毫米波雷达基础（2）——测速原理
- drupal与html转换,HTML转Drupal主题的方法
- 整理的一些java基础知识点，欢迎补充指正
- 经纬度与墨卡托坐标转化
- php setfield什么意思,thinkphp教程专题
- Ubuntu18安装截图工具flameshot
- 云服务器面临的问题_无服务器安全面临的多方面威胁以及我们应如何应对
- word图文混排复制到wangEditor图片不显示
- 和sar比起来，其他Linux命令都是猹---ing