div高度100%,div宽度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% 只要为html和body设置高度为100%就可以了html,body{height:100%;}这样之后div会按比例来继承上一级的高度了.仅仅 设置的DIV元素的height属性貌似没有什么效果。
同时,让人高兴的是,这样设置的css样式不存在浏览器兼容问题,在IE5.5、IE6、IE7、IE8还有火狐均可正常显示。
html,body{height:100%;}说明的是body是以浏览器窗口显示区高为基础的
转载于:https://www.cnblogs.com/itlichen/p/5836339.html
div高度100%,div宽度100%相关推荐
- html 给div设置高度,div高度设置 DIV 高度篇
DIV 高度教程-DIV的高度设置篇 如何对div设置高度呢?答案很简单 使用css height样式即可设置div高度. div的高度图 我们要对div对象设置高度样式,一般分为设置固定高度,最小高 ...
- css实现九宫格,不定宽高百分比(使用padding实现Div高度根据自适应宽度(百分比)调整)
css实现九宫格,但不一定有9个,可能有8个.7个,每两个格子间距是10px,一行放置3个格子,格子宽高比为1:2(最右的面试题) <div class="box">& ...
- CSS设置盒子容器(div)高度(height)始终为100%
前言 有时需要让一个盒子容器的 高度始终保持100%,无论怎么缩放浏览器高度始终不变.就像一些网站的侧边栏,但直接设置盒子容器的高度为100%是不起作用的. demo 如果想让一个元素的百分比高度he ...
- div 自定义拉宽_纯Css实现Div高度根据自适应宽度(百分比)调整
在如今响应式布局的要求下,很多能自动调整尺寸的元素能够做到高宽自适应,如img,通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整. 然而,用的最多的标签一哥Div却不能 ...
- html设置页面大小始终100%,css width 100% 宽度百分之百设置与不设置
css宽度百分之百设置与不设置 css width可以设置具体固定数值比如10px.500px.980px.1200px等,以达到网页固定宽度显示.css 宽度 width也可以设置百分比值,比如80 ...
- 百度富文本编辑器UEditor 图片宽度100%自适应,手机端
有些时候富文本编辑器的图片在手机端显示超出,没有自动100% 修改ueditor.all.js的23774行(左右,不一定)和24533(左右,不一定),不行就搜索 增加内容 loader.setAt ...
- div高度、宽度100% div width、height 100%
正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?这个100%是从 ...
- div高度、宽度100%|div width、height 100% - div100%
正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?这个100%是从 ...
- 关于div高度/宽度 100%
正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?这个100%是从 ...
最新文章
- 接口经常超时?线程池+ FutureTask来解决!
- motan rpc java demo_轻量级RPC框架-motan
- nginx常用功能全揭秘(内附福利!!!)
- nginx nodejs环境配置_基于docker的nodejs、php开发环境,包含多种组合安装
- redis——HyperLogLog
- 在Ubuntu下运行 apt-get update命令后出现错误:
- JUnit 4测试驱动开发结构图
- Nature重磅封面:复活死亡大脑!
- httphandler java_java – 使用HTTPHandler上传文件
- SREng 使用指南(四)智能扫描的详细解说
- Machine Learning机器学习自学资料整理
- linux认证ppt的图片,linux用户、组和身份认证-课件(PPT-精).ppt
- Python Flask学习_使用flask-login实现认证蓝本(一)
- iOSUILable边距设置
- 广域网技术(PAP和CHAP)
- JS实现动态生成表格
- 研华PCI板卡开发(6)快速入门(6)属性列表
- cocos2d-x的初步学习二十三之模仿微信打飞机二
- 足球队巡礼 - 英超西汉姆联
- 漏洞修复引发的项目报错