这个应该是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. No.026：Remove Duplicates from Sorted Array

    问题: Given a sorted array, remove the duplicates in place such that each element appear only once and ...

  2. struts2+spring的两种整合方式

    也许有些人会因为学习了struts1,会以为struts2.struts1与spring的整合也是一样的,其实这两者相差甚远.下面就来讲解一下struts2与spring的整合两种方案.(部分转载,里 ...

  3. java——获取从控制台输入的数据的方法

    一.使用标准输入串System.in System.in.read();     //一次只读入一个字节数据,但是我们往往希望获得的是一个字符串或者一组数字 二.使用Scanner获得一个字符串或一组 ...

  4. 十一个行为模式之观察者模式(Observer Pattern)

    定义: 定义对象之间一种一对多的关系,当被观察者状态变化时,可以自动地通知观察者并执行相关的业务操作.观察者模式又被称为发布-订阅模式等. 结构图: Subject:抽象主题类,定义了所有被观察类的通 ...

  5. 有问题得就分享（此实现不是 Windows 平台 FIPS 验证的加密算法的一部分）

    今天呢,我写完了MD5加密算法的代码,可是我正高兴的想运行时,按了F5.突然了个这样的窗体 我当时就纳闷了,怎么回事? 代码又没有错,这是乍回事! 于是呢上网查了看看:可以这样解决的 在window中 ...

  6. javascript随笔20160808

    var jsondata=$.parseJSON(@ViewBag.x); //转换为Json数据 var fruits = ["Banana", "Orange&quo ...

  7. web前端交互性易用性说明

    总结一下我们在web前端开发过程中总是强调交互性.易用性的情况分析说明.个人觉得web前端的易用交互也就是我们所说人性化操作.不外乎希望达到的效果为:界面风格简洁明了.重点突出:操作简单,直观可见.当 ...

  8. SharePoint 2013 图文开发系列之InfoPath入门

    本文主要介绍SharePoint 2013中,简单发布InfoPath表单,并添加后台代码,示例比较简单,主要描述的是一个创建InfoPath的过程,而非多么深奥的后台代码,希望能够给初学者带来帮助. ...

  9. [转]实现文字跑马灯效果，scrolling text from right to left

    <div> <marquee direction="left" behavior="scroll" scrollamount="10 ...

  10. VS2012 单元测试之泛型类（Generics Unit Test）

    关于单元测试,如果不会用可以参照我的上篇博文————在Visual Studio 2012使用单元测试 首先分享一篇博文,[Visual Studio] 开启Visual Studio 2012通过右 ...