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 ...
随机推荐
- Android用户界面 UI组件--AdapterView及其子类(二) AdapterViewAnimator及其子类
AdapterViewAnimator:当在视图间切换时会显示动画. android:animateFirstView 定义ViewAnimation首次显示时是否对当前视图应用动画. android ...
- [译]GotW #1: Variable Initialization
原文地址:http://herbsutter.com/2013/05/09/gotw-1-solution/ 第一个问题强调的是要明白自己在写什么的重要性.下面有几行简单的代码--它们大多数之间都有区 ...
- show processlist 输出ID 和 information_schema.PROCESSLIST 的id,information_schema.innodb_trx的TRX_MYSQL_T
Session 1: mysql> start transaction; Query OK, 0 rows affected (0.00 sec) mysql> update Client ...
- C++实现RTMP协议发送H.264编码及AAC编码的音视频(转)
C++实现RTMP协议发送H.264编码及AAC编码的音视频(转) RTMP(Real Time Messaging Protocol)是专门用来传输音视频数据的流媒体协议,最初由Macromedia ...
- linux中nginx的安装,linux的版本是ubutu
linux环境下,安装nginx,报错如下: the HTTP rewrite module requires the PCRE library. 1.需要安装pcre,报一下错误: you need ...
- [YZOJ1579]&&[BZOJ2450]arr
Description 给出3*n个数xi,要求构造三个长度为n的序列ai,bi,ci,使得满足下列条件: 1到3*n的每个数都在三个序列中的某个出现一次且仅一次: S=sum((x[ai]-x[bi ...
- 利用spm提供的MoAEpilot听觉数据学习预处理以及单被试glm分析与统计推断
1.数据介绍 下载:http://www.fil.ion.ucl.ac.uk/spm/data/auditory/ SUBJECT:1 VOLUME: 64*64*64 TR:7s total acq ...
- ArcGIS_系列中文教程
转自:http://www.cnblogs.com/gispeng/archive/2008/04/15/1154212.html ArcGIS_系列中文教程 如链接有问题请在留言中说明ArcGIS ...
- (转载)VC/MFC 工具栏上动态添加组合框等控件的方法
引言 工具条作为大多数标准的Windows应用程序的 一个重要组成部分,使其成为促进人机界面友好的一个重要工具.通过工具条极大方便了用户对程序的操作,但是在由Microsoft Visual C++开 ...
- 采集爬虫中,解决网站限制IP的问题? - wendi_0506的专栏 - 博客频道 - CSDN.NET
采集爬虫中,解决网站限制IP的问题? - wendi_0506的专栏 - 博客频道 - CSDN.NET undefined