父元素没有高度,子元素高度失效
当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果。你知道为什么height:100%
不起作用吗?
按常理,当我们用CSS的height属性定义一个元素的高度时,这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如,如果一个div
元素的CSS是height: 100px;
,那它应该在页面的竖向空间里占满100px的高度。
而跟W3C的规范,百分比的高度在设定时需要根据这个元素的父元素容器的高度。所以,如果你把一个div
的高度设定为height: 50%;
,而它的父元素的高度是100px,那么,这个div的高度应该是50px。
那为什么 height:100%; 不起作用
当设计一个页面时,你在里面放置了一个div
元素,你希望它占满整个窗口高度,最自然的做法,你会给这个div
添加height: 100%;
的css属性。然而,如果你要是设置宽度为width: 100%;
,那这个元素的宽度会立刻扩展到窗口的整个横向宽度。高度也会这样吗?
错。
为了理解为什么不会,你需要理解浏览器是如何计算高度和宽度的。Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值,那浏览器会自动将页面内容平铺填满整个横向宽度。
但是高度的计算方式完全不一样。事实上,浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则,浏览器就会简单的让内容往下堆砌,页面的高度根本就无需考虑。
因为页面并没有缺省的高度值,所以,当你让一个元素的高度设定为百分比高度时,无法根据获取父元素的高度,也就无法计算自己的高度。换句话说,父元素的高度只是一个缺省值:height: auto;
。当你要求浏览器根据这样一个缺省值来计算百分比高度时,只能得到undefined
的结果。也就是一个null值,浏览器不会对这个值有任何的反应。
观看演示
上面的演示例子是父元素没有设定固定高度,于是子元素的高度height: 100%
也不会起作用。你可以根据父元素的背景色来判断子元素的高度不是100%
。
那么,如果想让一个元素的百分比高度height: 100%;
起作用,你需要给这个元素的所有父元素的高度设定一个有效值。换句话说,你需要这样做:
<html><body> <div style="height: 100%;"> <p> 想让这个div高度为 100% 。 </p> </div> </body></html>
现在你给了这个div
的高度为100%,它有两个父元素<body>
和<html>
。为了让你的div的百分比高度能起作用,你必须设定<body>
和<html>
的高度。
<html style="height: 100%;"><body style="height: 100%;"> <div style="height: 100%;"> <p> 这样这个div的高度就会100%了 </p> </div> </body></html>
观看演示
从这个演示中你可以看出,height: 100%;
起作用了。
在使用height: 100%;
时需要注意的一些事项
1、Margins 和 padding 会让你的页面出现滚动条,也许这是你不希望的。
2、如果你的元素实际高度大于你设定的百分比高度,那元素的高度会自动扩展。
转载于:https://www.cnblogs.com/huiziblog666/p/6236750.html
父元素没有高度,子元素高度失效相关推荐
- jq获取父元素下的子元素
导入jq库 通过parent获取父元素 children获取子元素 $(".make-order").click(function(e) {var theli =$(this).p ...
- CSS实现父元素半透明,子元素不透明
CSS实现父元素半透明,子元素不透明. 很久以来大家都习惯使用opacity:0.5在新式浏览器里实现半透明,而对IE较旧的版本使用filter:Alpha(opacity=0.5)的滤镜来实现半透明 ...
- js 获取元素,同级元素下的子元素总结
太原总结 不慌不慌,来日方长 ** 1.获取同级元素 form 下的 div 元素下的 input标签的value值 ** //html代码 <div id="replySubmit& ...
- 清除元素中的子元素html_HTML中的元素简介
清除元素中的子元素html An element is a fundamental component that is used to develop web pages. Generally an ...
- Vue中v-for必须在vue实例对应元素下的子元素中循环渲染数据
异常信息 Cannot use v-for on 1 stateful componentroot element because it renders multiple elements 翻译大意: ...
- hover父元素,不希望子元素消失(子元素盒子在下方展开,但鼠标移到子元素时盒子却消失了)
问题: 1.hover注销父元素时,展开11111111子元素盒子下拉框: 2.鼠标移动到11111111子元素时,不希望11111111盒子消失:但有时候却消失了: 原因:'注销' 此元素可能存现绝 ...
- html 相对于父标签位置,css子元素如何相对父元素定位?
在css中,可以使用position属性,通过给父元素设置相对定位"position:relative;"样式,给子元素设置绝对定位"position:absolute; ...
- jquery 同级元素下的子元素_jq 获取所有父级元素及同级元素及子元素的方法(推荐)...
1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() 获取其所有的祖先元素 $("#id&quo ...
- html div父集子集,抛砖引玉css系列---根据父元素包含的子元素个数,实现不同的样式...
工作时遇到这样一个问题:根据某元素所包含的子元素个数,分别设置不同的样式,这个用js可以解决,不过个人认为用css解决可能更简单一点.这也正好加深了我对css选择器的理解和运用. demo如下: 效果 ...
- html5shiv主要解决IE6-8 无法识别HTML5的新标签,父节点不能包裹子元素,以及应用CSS样式...
html5shive html5shiv主要IE6-8解决: 1,HTML5提出的新的元素不被IE6-8识别. 2,这些新元素不能作为父节点包裹子元素, 3,并且不能应用CSS样式.让CSS 样式应用 ...
最新文章
- [BZOJ 1002] [FJOI 2007] 轮状病毒
- 在二分类问题中,准确率一直处于50%上下的解决方法
- mongodb update
- 云计算灾备:灾备通识
- protobuf入门教程(一):简介和安装
- [NOI2018]冒泡排序
- centos 关闭防火墙_CentOS7操作系统下如何关闭防火墙
- 工业互联网的最后一公里
- 配置管理工具---SVN
- Java简单输出,输出Hello World,将代码上传到Github
- EXCEL多元回归分析
- 通达OA2017恢复数据库Access denied for user 'root'@'localhost' (using password: YES)报错的解决办法
- 消息中间件RabbitMQ
- Linux下wps文档结构图,wps文字的文档结构图
- 海康摄像头实现点位缩放功能(切换焦距)
- C语言核心知识点总结
- win10设置虚拟内存_电脑配置强,虚拟内存没有用?教你这样设置,瞬间提升流畅度!...
- 2018福大软工实践第四次作业
- Laravel 安装多国语言包后,phpstorm 还是报错
- Dinal爱磕盐--QFN封装的焊接
热门文章
- VMware虚拟机 硬盘空间不足 磁盘大小调整方案
- Linux基础-编译安装Python
- 新增字段属性“是否转义”,提高列表展示性能
- Java设计模式(10)代理模式(Proxy模式)
- taobao淘宝 开源的项目tair 简介
- WindowsAPI概览
- LabView学习笔记(六):while循环与for循环
- python 在线客服_后端Python3+Flask结合Socket.io配合前端Vue2.0实现简单全双工在线客服系统...
- cmp linux 命令,比较文件Linux基本命令:cmp
- matlab 修正后阿尔法,修正后的阿尔法均值滤波器Alpha.ppt