flex引起height:100%失效
这个应该是flex和position冲突的解决方案
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
} html, body {
height: 100%;
} .wrap {
display: flex;
flex-direction: column;
height: 100%;
} header {
height: 50px;
line-height: 50px;
text-align: center;
background-color: #ccc;
border-bottom: 1px solid #999;
} footer {
height: 50px;
line-height: 50px;
text-align: center;
background-color: #ccc;
border-top: 1px solid #999;
} .main {
flex: 1;
position: relative;
} .panel {
position: absolute;
width: 100%;
height: 100%;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="wrap">
<header>
头部
</header>
<div class="main">
<div class="panel">
<pre>
父容器position:relative;
子元素position:absolute;
width: 100%;
height:100%;
</pre>
</div>
</div>
<footer>
底部
</footer>
</div>
</body>
</html>
flex引起height:100%失效的更多相关文章
- css height:100%失效
有时做移动端页面时,需要用到height:100%来控制,但是设置完后会发现,用百分比的高是不生效的. 经过上网浏览等查阅资料得知,是否可以使用百分比是根据父级对象定义的.所以解决方法就是在body和 ...
- chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素
1 <div class="container"> <div class="item"> <div class="ite ...
- css中 出现height为100%失效的原因及解决方案
我们都知道需要给html和body标签设置了高度height:100%之后,再给内部的div设置height:100%的时候,内部div的高度100%才会起到作用.这是由于:%是一个相对父元素计算得来 ...
- 《CSS世界》读书笔记（五） --height:100%
<!-- <CSS世界> 张鑫旭著 --> 相对简单而单纯的height:auto height:auto比width:auto简单的多,原因在于: CSS默认流是水平方向的, ...
- height百分比失效
heigh:100%失效 解决方案: 第一种 html, body { height: 100%; } 第二种 div { height: 100%; position: absolute; } 非定 ...
- 使flex-direction: column的子元素height: 100%生效的办法
在flex-direction: column子元素里直接使用height:100%,height并不会被设置成100% <!DOCTYPE html> <html lang=&qu ...
- css top,right,bottom,left设置为0有什么用？它和width:100%和height:100%有什么区别？
壹 ❀ 引 当我们使用position属性时,总免不了与top,left,right,bottom四个属性打交道,那么这四个属性都设置为0时有什么用,与宽高设置100%又有什么区别?本文对此展开讨论 ...
- html,body设置{height:100%}[转]
一般情况下,我们css控制的最高节点就是body,例如设置: body{background:#069;} 则浏览器界面就是完全的#068的背景色.这里看上去是<body>标签下的背景色起 ...
- html中设置height=100%无效的问题
设置height=100%(网页内容能够更好的适配各种屏幕大小) 第一种是设置某个单独的div元素 height=100%无效 原因很简单,所有基于本分比的尺寸必须基于父元素,而你如果没有设置父元 ...
随机推荐
- 解决jdk1.8上编译dubbo失败
首先从https://github.com/alibaba/dubbo/archive/master.zip下载最新源码,目前最新版本为2.5.4-SNAPSHOT. 我使用的是JDK 1.8.0_0 ...
- NET IL命令查询器
最近研究了一下IL代码,闲来无事,开发一个小工具,供大家使用.编程.破解,手头必备工具. 模糊搜索,可以把相关的命令都列出来.选中行,可以提示指令说明. 如果指令不全,可以增加指令及说明. CSDN下 ...
- 【小贴士】【stringify神BUG】【localstorage失效】【消灭Safari alert框】【是否延迟加载】【页面10px白屏】
前言 最近碰到几个恶心问题,也发现一点优化技巧,以及对Hybrid知识的一些整理,这里便一并拿出来做分享了,关于Hybrid的调试,会是我今后一个重点 我的博客首先是学习笔记,方便自己做知识沉淀,以后 ...
- 12种不适宜使用的javascript语法
1. == (o゜▽゜)o☆[BINGO!] Javascript有两组相等运算符,一组是==和!=,另一组是===和!==.前者只比较值的相等,后者除了值以外,还比较类型是否相同. 请尽量不要使用前 ...
- SU54 新建视图簇 维护数据表
由于一些数据表的数据比较重要,不允许直接查看数据表中的数据或者通过SM30进行维护, 故可以通过新建一个视图簇的方式来实现,然后通过程序调用这个视图簇,来进行数据的维护. 运行事务码SE54 最后通过 ...
- 网络分析之Pgrouting（转载）
网上关于Pgrouting的使用介绍太简单了,这里想详细的总结一下Pgrouting的使用,其实主要参照官方文档:http://workshop.pgrouting.org/ 第一步:配置环境 关于P ...
- 去除GridView选中时的蓝色背景
解决办法: android:listSelector="#00000000" android:listSelector="@android:color/transpare ...
- UITextView 开始编辑时，文字没有左上角对齐解决办法 tableview整体上移
现实情况如上所示 我出现这种情况的原因有两种: 其一:没有给textview对齐方式: 其二:没有将BOOL类型的“ automaticallyAdjustsScrollViewInsets ”属性置 ...
- 2015 MVP OpenDay 及 Community Camp 演讲PPT分享
这两天来到首都北京参加一年一度的MVP OpenDay 和 MVP Community Camp.其中,31号下午有我的课程:What Will You Make: Windows IoT应用开发入门 ...
- ORA-19502: write error on file "xxxxx", block number xxxx
错误现象: 在ORACLE 10g下为表空间IGNITE_EGVSQL01增加数据文件时,报如下错误: SQL> ALTER TABLESPACE IGNITE_EGVSQL01 AD ...