有时做移动端页面时,需要用到height:100%来控制,但是设置完后会发现,用百分比的高是不生效的。

经过上网浏览等查阅资料得知,是否可以使用百分比是根据父级对象定义的。所以解决方法就是在body和html,加上height:100%;就可以了。下面看代码。

  1. html,body{
  2. height:100%;
  3. }
  4. .height{
  5. height:50%;
  6. }
  7. <div class="height">高度百分比</div>

这样问题就解决了,如果div层级比较深,那就在需要百分比高的前面几层div都加上height:100%。

css height:100%失效的更多相关文章

  1. css height:100%和height:auto的区别

    css height:100%和height:auto的区别 height:auto,是指根据块内内容自动调节高度.height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高 ...

  2. flex引起height:100%失效

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. CSS height:100%无效

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/38 浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚 ...

  4. CSS中设置height:100%无效的解决方案

    在网页设计中有时会设置某个DIV或者TABLE的高度自适应,即元素的高度充满父元素的高度.一般使用设置CSS  height:100%来实现.但是当元素层级嵌套比较深的时候,设置该属性并不能得到应有的 ...

  5. css中 出现height为100%失效的原因及解决方案

    我们都知道需要给html和body标签设置了高度height:100%之后,再给内部的div设置height:100%的时候,内部div的高度100%才会起到作用.这是由于:%是一个相对父元素计算得来 ...

  6. 《CSS世界》读书笔记(五) --height:100%

    <!-- <CSS世界> 张鑫旭著 --> 相对简单而单纯的height:auto height:auto比width:auto简单的多,原因在于: CSS默认流是水平方向的, ...

  7. css top,right,bottom,left设置为0有什么用?它和width:100%和height:100%有什么区别?

     壹 ❀ 引 当我们使用position属性时,总免不了与top,left,right,bottom四个属性打交道,那么这四个属性都设置为0时有什么用,与宽高设置100%又有什么区别?本文对此展开讨论 ...

  8. [转载]css菜鸟之HTML 中块级元素设置 height:100% 的实现

    HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...

  9. 【CSS系列】height:100%设置div的高度

    一.div设置百分百高度实现描述 在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的.这个是因为body高度默认值为自适应的,所以及时设置bo ...

随机推荐

  1. IBinder类的中文翻译

    远程对象的基础接口,是一个为了在执行进程中和进程间调用时的高性能,而设计的轻量级远程调用机制的核心部分.这个接口描述了和远程对象交互的抽象协议.不要直接实现这个接口,而是通过继承Binder来实现. ...

  2. 【HDOJ】4585 Shaolin

    Set可解,Treap也可解.(1) Treap /* */ #include <iostream> #include <string> #include <map> ...

  3. C++实现RTMP协议发送H.264编码及AAC编码的音视频(转)

    C++实现RTMP协议发送H.264编码及AAC编码的音视频(转) RTMP(Real Time Messaging Protocol)是专门用来传输音视频数据的流媒体协议,最初由Macromedia ...

  4. Android Loader详解三:重启与回调

    重启装载器 当你使用initLoader()时,如果指定ID的装载器已经存在,则它使用这个装载器.如果不存在呢,它将创建一个新的.但是有时你却是想丢弃旧的然后开始新的数据. 要想丢弃旧数据,你应使用r ...

  5. (转载)mysql decimal、numeric数据类型

    (转载)http://www.cnblogs.com/qiantuwuliang/archive/2010/11/03/1867802.html 可能做程序的人都知道,float类型是可以存浮点数(即 ...

  6. 模拟(堆):USACO Jan11 瓶颈

    题目描述 Farmer John is gathering the cows. His farm contains a network of N (1 <= N <= 100,000) f ...

  7. HDU-1372 Knight Moves (BFS)

    Problem Description A friend of you is doing research on the Traveling Knight Problem (TKP) where yo ...

  8. Android学习笔记(八)深入分析Service启动、绑定过程

    Service是Android中一个重要的组件,它没有用户界面,可以运行在后太做一些耗时操作.Service可以被其他组件启动,甚至当用户切换到其他应用时,它仍然可以在后台保存运行.Service 是 ...

  9. Linux IIO子系统分析

    最近稍微看了下LKML,发现里面有一个子系统叫做“IIO”.以前没有接触过,所以Google了下.     IIO子系统全称是 Industrial I/O subsystem(工业 I/O 子系统) ...

  10. [置顶] cocos2dx sqllite 增删查改等操作

    首先导入文件shell.c sqllite3.c sqlite3.h sqlite3etx.h文件(注意在生成安卓项目是 不要将shell.c写进android.mk文件中,写进去在cywin中生成会 ...