有时做移动端页面时,需要用到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. Adobe Flash Builder 4.7下载地址及破解补丁(32位&64位)

    Adobe FlashBuilder 4.7是开发flex的利器,能显著提高flex的开发效率.最新版的是4.7,去官网上下载时每次都要登录才能下载,特麻烦,这次下载时就把相关的下载地址给记录了下来, ...

  2. Hadoop RPC源码阅读-交互协议

    Hadoop版本Hadoop2.6 RPC主要分为3个部分:(1)交互协议(2)客户端 (3)服务端 (1)交互协议 协议:把某些接口和接口中的方法称为协议,客户端和服务端只要实现这些接口中的方法就可 ...

  3. ECSHOP首页调用指定分类下的商品

    转:http://bbs.ecshop.com/thread-1123207-1-1.html 调用某个分类下的商品,方法有很多种的,不过都需要先在后台设置模板那里设置显示和显示条数, 然后在需要调用 ...

  4. Linux下Chrome浏览器的BUG

    “我胡汉三又回来了”,好久没出现在博客园了,准备考试什么的最烦躁了,今天又重新整了下我的Ubuntu,结果发现了一个Chrome浏览器的Bug,但是与其说它是个Bug,还不如说它是个Joke. 好吧, ...

  5. Android项目开发全程(四)-- 将网络返回的json字符串轻松转换成listview列表

    前面几篇博文介绍了从项目搭建到获取网络字符串,对一个项目的前期整体工作进行了详细的介绍,本篇接着上篇介绍一下怎么样优雅将网络返回的json字符串轻松转换成listview列表. 先上图,看一下效果. ...

  6. 运行.class文件提示找不到或者无法加载主类原因

    在Java初学之时,用文本文件写了一个“hello world”的简单程序.在dos环境下使用命令javac -test1.java 进行编译. 编译出名称为test1.class的Java运行文件. ...

  7. [LeetCode] 86. Partition List 解题思路

    Given a linked list and a value x, partition it such that all nodes less than x come before nodes gr ...

  8. Raspberry Pi Kernel Compilation 内核编译官方文档

    elinux.org/Raspberry_Pi_Kernel_Compilation#Use_the_provided_compiler Software & Distributions: S ...

  9. JAVA虚拟机简介

    Java虚拟机定义 Java虚拟机有多层含义 一套规范:Java虚拟机规范.定义概念上Java虚拟机的行为表现 一种实现:例如HotSpot,J9,JRockit.需要实现JVM规范,但具体实现方式不 ...

  10. mongodb在window下和linux下的部署 和 安装可视化工具

    Windows安装    安装Mongo数据库: 在发布本文的时间官方提供的最新版本是:2.4.0 ,如果不做特殊声明,本教程所用的版本将会是这个版本. 第一步:下载安装包:http://www.mo ...