css height:100%失效
有时做移动端页面时,需要用到height:100%来控制,但是设置完后会发现,用百分比的高是不生效的。
经过上网浏览等查阅资料得知,是否可以使用百分比是根据父级对象定义的。所以解决方法就是在body和html,加上height:100%;就可以了。下面看代码。
- html,body{
- height:100%;
- }
- .height{
- height:50%;
- }
- <div class="height">高度百分比</div>
这样问题就解决了,如果div层级比较深,那就在需要百分比高的前面几层div都加上height:100%。
css height:100%失效的更多相关文章
- css height:100%和height:auto的区别
css height:100%和height:auto的区别 height:auto,是指根据块内内容自动调节高度.height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高 ...
- flex引起height:100%失效
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- CSS height:100%无效
本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/38 浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚 ...
- CSS中设置height:100%无效的解决方案
在网页设计中有时会设置某个DIV或者TABLE的高度自适应,即元素的高度充满父元素的高度.一般使用设置CSS height:100%来实现.但是当元素层级嵌套比较深的时候,设置该属性并不能得到应有的 ...
- css中 出现height为100%失效的原因及解决方案
我们都知道需要给html和body标签设置了高度height:100%之后,再给内部的div设置height:100%的时候,内部div的高度100%才会起到作用.这是由于:%是一个相对父元素计算得来 ...
- 《CSS世界》读书笔记(五) --height:100%
<!-- <CSS世界> 张鑫旭著 --> 相对简单而单纯的height:auto height:auto比width:auto简单的多,原因在于: CSS默认流是水平方向的, ...
- css top,right,bottom,left设置为0有什么用?它和width:100%和height:100%有什么区别?
壹 ❀ 引 当我们使用position属性时,总免不了与top,left,right,bottom四个属性打交道,那么这四个属性都设置为0时有什么用,与宽高设置100%又有什么区别?本文对此展开讨论 ...
- [转载]css菜鸟之HTML 中块级元素设置 height:100% 的实现
HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...
- 【CSS系列】height:100%设置div的高度
一.div设置百分百高度实现描述 在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的.这个是因为body高度默认值为自适应的,所以及时设置bo ...
随机推荐
- perl静态编译DBD
编译DBD 项目中经常使用perl,但perl在连接数据库时,需要依赖DBI,DBD驱动,但默认安装DBD驱动时,需要依赖数据库的lib库. 比如perl连接MySQL,需要安装MySQL clien ...
- Codevs_2102_石子归并2_(环状动态规划)
描述 http://codevs.cn/problem/2102/ 2102 石子归并 2 时间限制: 10 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题目 ...
- (转载)Linux上iptables防火墙的基本应用教程
(转载)http://www.vpser.net/security/linux-iptables.html iptables是Linux上常用的防火墙软件,下面vps侦探给大家说一下iptables的 ...
- Linux方向职业规划
Linux方向职业分析 引言: 据了解,Linux普通网络管理人员的月薪大约5000元左右,负责编程的Linux软件工程师月薪大约在8000元到12000元之间,Linux嵌入式软件开发人员的月薪大约 ...
- Installing Ubuntu on a Pre-Installed Windows 8 (64-bit) System (UEFI Supported)
http://askubuntu.com/questions/221835/installing-ubuntu-on-a-pre-installed-windows-8-64-bit-system-u ...
- hdoj 1068 Girls and Boys【匈牙利算法+最大独立集】
Girls and Boys Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- UVA 6199 不定根最小树形图
首先是最小树形图的介绍. 看这个博客.最小树形图 上面介绍的很详细了,我就讲一下这道题的题意. 首先给出一些二维点坐标,这些坐标之间构成一些有向图,根据题意,假设两个点a(x1 ,y1) ,b(x2 ...
- typeahead使用配置参数。
示例代码: var suggestion_source = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace( ...
- array_column php 函数
今天想从二维数组中取某个列成一维数组 结果发现 array_column需要php5.5支持才行 然后自己写了一个仿造版本的array_column 两种思路 1.直接遍历 取值给追加数组 返回 2. ...
- GUI(图形用户界面)
一.GUI(图形用户界面) GUI Graphical User Interface(图形用户接口) 用图形的方式,来显示计算机操作的界面,这样更方便更直观 CLI Command line User ...