CSS百分比定义高度为什么没有效果
来源:互联网 发布:鲁大师mac版下载 编辑:程序博客网 时间:2024/05/06 14:26
当我们给块级元素设置响应式高度的时候,例如给div设置height=50%,往往没能看到效果。
原因是百分比的大小是相对其父级元素宽高的大小,如最外层元素设置的百分比是对应屏幕而言的。
需要了解的是对于宽度来说,其父级元素无须确定宽度就能设置百分比,例如我们可以利用这个特性给未知宽度的块级元素设置水平居中效果:
父元素css: position: relative/absolute; left: 50%;
子元素css: position: relative; left: -50%;
但高度则不同,若某元素的父元素没有确定高度,则无法有效使用height=XX%的样式,我们可以这样解决(假设最外层的div需要设置百分比高度样式):
代码如下:
html, body { height: 100%; } .outDiv { height: 50%; }
不过这里有个需要注意的,若div里的内容超出了div的高度,在IE7+的浏览器是无法将div撑起来的(IE6则可以),如果要顾及这一点,可以使用min-height解决(当然也要考虑IE6不支持min-height的问题):
代码如下:
html, body { height: 100%; } .outDiv { min-height: 50%; } * html .outDiv { height: 50%; }
0 0
- CSS百分比定义高度为什么没有效果
- css 百分比 定义高度 小结
- 为什么用CSS定义overflow属性没有效果?
- css 设置高度、宽度 百分比无效
- CSS学习总结---页面高度百分比
- CSS百分比实现高度占位自适应
- 暗藏玄机为何CSS所定义属性没有效果
- css 宽度与高度按百分比显示,且宽高相等,span高度百分比
- css 没有宽度和高度声明实现的全屏自适应效果
- 在 CSS 中如何使用百分比设置页面 Div 高度?
- CSS图片宽度设置百分比 , 高度同宽度相同
- css实现div高度根据自适应宽度(百分比)调整
- CSS定义通用透明效果
- CSS定义通用透明效果
- CSS定义通用透明效果
- DIV+CSS固定高度滚动条效果
- css 高度自适应的九宫格效果
- C++为什么没有重复定义错误?
- jqgrid隐藏表头
- TelephonyManager获取到手机的一些信息
- mysql 设置编码格式为utf8
- 第01章 快速入门
- SWT常用组件
- CSS百分比定义高度为什么没有效果
- GRE红宝书使用方法介绍
- 造成电路板焊接缺陷的三大因素详解
- Install oracle 12c
- 平板灯布局分析及计划细致事变
- 分享玻璃知识:玻璃油墨的分类
- iOS开发系列--XIB开发
- vs2010的编程语言调整
- JSP中遍历显示从Action中接收到的list