这个应该是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%失效的更多相关文章

  1. css height:100%失效

    有时做移动端页面时,需要用到height:100%来控制,但是设置完后会发现,用百分比的高是不生效的. 经过上网浏览等查阅资料得知,是否可以使用百分比是根据父级对象定义的.所以解决方法就是在body和 ...

  2. chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素

    1 <div class="container"> <div class="item"> <div class="ite ...

  3. css中 出现height为100%失效的原因及解决方案

    我们都知道需要给html和body标签设置了高度height:100%之后,再给内部的div设置height:100%的时候,内部div的高度100%才会起到作用.这是由于:%是一个相对父元素计算得来 ...

  4. 《CSS世界》读书笔记（五） --height:100%

    <!-- <CSS世界> 张鑫旭著 --> 相对简单而单纯的height:auto height:auto比width:auto简单的多,原因在于: CSS默认流是水平方向的, ...

  5. height百分比失效

    heigh:100%失效 解决方案: 第一种 html, body { height: 100%; } 第二种 div { height: 100%; position: absolute; } 非定 ...

  6. 使flex-direction: column的子元素height: 100%生效的办法

    在flex-direction: column子元素里直接使用height:100%,height并不会被设置成100% <!DOCTYPE html> <html lang=&qu ...

  7. css top,right,bottom,left设置为0有什么用？它和width:100%和height:100%有什么区别？

     壹 ❀ 引 当我们使用position属性时,总免不了与top,left,right,bottom四个属性打交道,那么这四个属性都设置为0时有什么用,与宽高设置100%又有什么区别?本文对此展开讨论 ...

  8. html,body设置{height:100%}[转]

    一般情况下,我们css控制的最高节点就是body,例如设置: body{background:#069;} 则浏览器界面就是完全的#068的背景色.这里看上去是<body>标签下的背景色起 ...

  9. html中设置height=100%无效的问题

    设置height=100%(网页内容能够更好的适配各种屏幕大小) 第一种是设置某个单独的div元素   height=100%无效 原因很简单,所有基于本分比的尺寸必须基于父元素,而你如果没有设置父元 ...

随机推荐

  1. FFMpeg video duration

    1. 代码 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import ...

  2. 学习.NET是因为热爱 or 兴趣 or 挣钱？

    看到最近园子里掀起了“.NET快不行了”.“.NET工资太低了”.“转行做XX”等一系列之风,不由得想说点什么,我只是基于自己的观点,你认同或者不认同,我就是这样认为,无所谓对与错,写文章就是为了交流 ...

  3. jQuery演示8种不同的图片遮罩层动画效果

    效果预览 下载地址 jQuery插件大全 实例代码 <div class="container"> <h1>jQuery图标和文章动画效果</h1&g ...

  4. 取出session中的所有属性与值的方法

    如果你想取出session中所有的属性和值,可以通过getAttributeNames()方法来实现,具体代码如下 //获取session HttpSession session = request. ...

  5. SharePoint 2013 定制搜索显示模板

    前言 之前我们已经介绍了一些关于搜索的相关配置,当然,用户关于搜索的要求可能是各种各样.有时候,用户会说,你们的显示结果太Low了,确实是:不过,在SharePoint中,我们可以很容易的定制搜索结果 ...

  6. Win7下共享WiFi热点方法

    管理员权限运行CMD netsh wlan set hostednetwork mode=allow ssid=Wifi名称 key=Wifi密码 netsh wlan start hostednet ...

  7. IOS开发基础知识--碎片48

    1:Assertion failure in dequeueReusableCellWithIdentifier:forIndexPath:  static NSString *CellIdentif ...

  8. WebConfig配置文件详解

    今天看到博客园一位朋友整理的一个WebConfig配置文件详解,觉得不错,转载一下: <?xml version="1.0"?> <!--注意: 除了手动编辑此文 ...

  9. ASP.NET MVC3 Razor 调试与预加载

    目录(?)[-] 获取服务器信息 FormsAuthenticationSlidingExpiration 属性 MVC3预加载   在ASP.NET MVC3开发中,调试中怎么也是不可缺少的,那对于 ...

  10. IT人创业之融资方式 - 创业与投资系列文章

    对于想要创业的IT人,最基本的就是需要资金和团队.笔者在经历了自己制定的职业道路之后(见文:IT从业者的职业道路(从程序员到部门经理) - 项目管理系列文章),进行过投资(见文:IT人经济思维之投资 ...