这个应该是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. Integer.valueof(String s)和Integer.parseInt(String s)的具体区别是什么？

    Integer.valueof(String s)和Integer.parseInt(String s)的具体区别是什么? Integer.valueof(String s)是将一个包装类是将一个实际 ...

  2. 安卓模拟器genymotion连接eclipse成功但是不显示其中项目

    安卓模拟器困了我两三天了,原装模拟器比较慢,忍受不了,查到安卓模拟器的神器——genymotion 按照网上的步骤一步步都安装完毕,最后打开后发现,genymotion界面里面没有找到新建的工程, 这 ...

  3. 【系统架构】缓存Memcache 使用原子性操作add，实现并发锁

    原文地址 memcache中Memcache::add()方法在缓存服务器之前不存在key时, 以key作为key存储一个变量var到缓存服务器.我们使用add来向服务器添加一个键值对应,如果成功则添 ...

  4. 滚动条美化实践（原生js，iscroll，nicescroll）

    近期需要改造项目中的滚动条,使原滚动条在三大浏览器下表现相同,分享一下自己的改造经历: 项目中的滚动条分布在网页的各个小窗口中,使用的是-webkit-scrollbar制作,在-webkit内核的浏 ...

  5. How To Search and Restore files from Site Collection Recycle Bin

    $sitecoll = Get-SPSite "http://wheresmydoc.findit.com" $sitecoll.RecycleBin | ?{$_.Title - ...

  6. 用Kotlin开发Android应用（II）：创建新项目

    这是关于Kotlin的第二篇.各位高手发现问题,请继续“拍砖”. 原文标题:Kotlin for Android(II): Create a new project 原文链接:http://anton ...

  7. centos7 无法启动网卡

    (1)需要指定一下hwaddr (2)onboot＝yes /etc/sysconfig/network-script/

  8. JVM-加载，链接，初始化

    Java Virtual Machine 动态的加载,链接和初始化类和接口.那么,Class 二进制文件是怎样被 JVM 加载到内存中的?JVM 如何描述一个 Java 类?类或接口怎么才能让 JVM ...

  9. centos6.5和centos7如何搭建php环境

    作者:白狼 出处:http://www.manks.top/linux_php.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责 ...

  10. 版本管理工具SVN

    此文件根据慕课网 源生活老师的教学视频总结 视频地址 http://www.imooc.com/learn/109 一．SVN下载和安装配置 服务端下载地址 https://www.visualsvn ...