这个应该是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. 魔术方法__sleep 和 __wakeup

    感觉序列化和反序列化用得倒是比较少了,而json_encode和json_decode用得相对多,都是转化成串,进行入库.传输等.json更方便,但是序列化和反序列化结合这两个魔术方法使用倒还行< ...

  2. 从零开始学 Java - Spring MVC 统一异常处理

    看到 Exception 这个单词都心慌 如果有一天你发现好久没有看到Exception这个单词了,那你会不会想念她?我是不会的.她如女孩一样的令人心动又心慌,又或者你已经练功到了孤独求败,等了半辈子 ...

  3. 《More Effective C#》读书笔记

    <More Effective C#>这本书,大概是四年前看完的,但只整理了一部分读书笔记,后面有时间的话,会陆续补充的. More Effective C# :使用泛型 More Eff ...

  4. 对js中this的一点点理解

    1 当函数作为对象的方法被调用的时候 this就指向该对象 var o = { prop: 37, f: function() { return this.prop; } }; console.log ...

  5. 【高级功能】使用 Ajax（续）

    1. 准备向服务器发送数据 Ajax 最常见的一大用途是向服务器发送数据.最典型的情况是从 客户端发送表单数据,即用户在form元素所含的各个 input 元素里输入的值.下面代码展示了一张简单的表单 ...

  6. SharePoint 2013 定制搜索显示模板（二）

    前言 之前一篇博客,简单的介绍了如何定制搜索显示模板,这一次,我们介绍一下如何定制搜索显示时,弹出来的那个页面,相信这个大家也都会遇到的. 1.第一部分就是搜索显示模板的部分,第二部分就是搜索项目详情 ...

  7. Sharepoint学习笔记—习题系列--70-573习题解析 -(Q142-Q143)

    Question 142You have a Feature that contains an image named ImageV1.png.You plan to create a new ver ...

  8. AFNetworking的理解

    AFNetworking的理解 使用方法 1. 新建的工程中导入AFNetworking3.0中的(AFNetworking 和UIKit+AFNetworking两个文件夹) 2. 在用到AFNet ...

  9. App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file

    ios进行http请求,会出现这个问题: App Transport Security has blocked a cleartext HTTP (http://) resource load sin ...

  10. IOS开发基础知识--碎片47

    1:解决ios静态库中的类别(category)在工程中不能使用 解决方法为:找到 target 的图标,更改其 Other Linker Flags 为: -all_load 或 -force_lo ...