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%无效 原因很简单,所有基于本分比的尺寸必须基于父元素,而你如果没有设置父元 ...
随机推荐
- String和Date、Timestamp之间的转换
一.String与Date(java.util.Date)互转 1.1 String -> Date String dateStr = "2010/05/04 12:34:23&quo ...
- 深入理解http/https协议
深入理解HTTP协议(转) http协议学习系列 1. 基础概念篇 1.1 介绍 HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写.它的发展是万维网协会(Wo ...
- C/C++内存分配
一. 预备知识—程序的内存分配: 一个由C/C++编译的程序占用的内存分为以下几个部分:1.栈区(stack)—由编译器自动分配释放,存放函数的参数值,局部变量的值等.其操作方式类似于数据结 ...
- placeholder不兼容 IE10 以下版本的解决方法
对于密码输入框placeholder的兼容问题:HTML代码:<input type="password" id="loginPassword" plac ...
- #8.31课堂总结#JS基础
一.Javascript能做些什么? 表单数据合法性验证 网页特效:使用DOM和CSS可以实现网页特效 交互式菜单:创作具有动态效果的交互式菜单,完全能够与flash制作的导航菜单相媲美 动态页面:使 ...
- 二次、三次贝塞尔曲线demo(演示+获取坐标点)
二次贝塞尔曲线demo: See the Pen quadraticCurveDemo by hanyanjun (@hanyanjun) on CodePen. 我的demo地址(二次) 推荐点击以 ...
- 基于git diff进行的eslint代码检测
缘起 在项目中, 通常都会使用代码检测工具来规范团队的代码风格, 比如eslint.随着代码的不断增加, eslint进行代码检测的时间也越来越久.每次检测的时候, 需要检测的文件和实际检测的文件极度 ...
- jQuery动画特效实例教程
本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下: <div class="module"> <div cla ...
- iOS所有常见证书,appID,Provisioning Profiles配置说明及制作图文教程
转自holydancer的CSDN专栏,原文地址:http://blog.csdn.net/holydancer/article/details/9219333 概述: 苹果的证书繁锁复杂,制作管理相 ...
- 关于iOS10
iOS10相册相机闪退bughttp://www.jianshu.com/p/5085430b029fiOS 10 因苹果健康导致闪退 crashhttp://www.jianshu.com/p/54 ...