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%无效 原因很简单,所有基于本分比的尺寸必须基于父元素,而你如果没有设置父元 ...
随机推荐
- Java的关键字与标识符
Java作为一门编程语言,与其他语言一样,有字符集.标识符.和关键字.变量.常量.语句等编程语言的基本要素. 1.关键字 abstract boolean break byte case catch ...
- 使用TabPageIndicator的样式问题
在使用TabPageIndicator往往会出现一些样式问题,导致看不到字,下面是总结的步骤: 1.布局<LinearLayout xmlns:android="http://sche ...
- 从零开始学 Java - Spring AOP 实现主从读写分离
深刻讨论为什么要读写分离? 为了服务器承载更多的用户?提升了网站的响应速度?分摊数据库服务器的压力?就是为了双机热备又不想浪费备份服务器?上面这些回答,我认为都不是错误的,但也都不是完全正确的.「读写 ...
- iOS 苹果开发证书失效的解决方案(Failed to locate or generate matching signing assets)
从2月14日开始,上传程序的同学可能会遇到提示上传失败的提示. 并且打开自己的钥匙串,发现所有的证书全部都显示此证书签发者无效. 出现以下情况: Failed to locate or generat ...
- iOS所有常见证书，appID,Provisioning Profiles配置说明及制作图文教程
转自holydancer的CSDN专栏,原文地址:http://blog.csdn.net/holydancer/article/details/9219333 概述: 苹果的证书繁锁复杂,制作管理相 ...
- iOS面试题总结(一)
面试题总结 1.#import 跟#include.@class有什么区别?#import<> 跟 #import""又什么区别? include和#import都能完 ...
- pull解析器: 反序列化与序列化
pull解析器:反序列化 读取xml文件来获取一个对象的数据 import java.io.FileInputStream; import java.io.IOException; import ja ...
- Java源码分析之LinkedList
LinkedList与ArrayList正好相对,同样是List的实现类,都有增删改查等方法,但是实现方法跟后者有很大的区别. 先归纳一下LinkedList包含的API 1.构造函数: ①Linke ...
- Linux命令学习总结：last
命令简介: 该命令用来列出目前与过去登录系统的用户相关信息.指令英文原义:show listing of last logged in users 执行权限 :有些需要特殊权限 指令所在路径: ...
- Linked Server: EXECUTE permission denied on object 'xp_prop_oledb_provider', database 'master', owner 'dbo'
问题出现环境: 使用SQL Server Management Studio 2008 连接到SQL Server 2000的数据库,点击其中一个Oracle链接服务器,单击"目录" ...