这个应该是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. css中定位

    一切皆为框div.h1或p元素尝尝被称为块级元素.这意味着这些元素显示为一块内容,即“块框”.与之相反,span和strong等元素称为“称为”行内元素“,这是因为他们的内容显示在行中,即”行内框“. ...

  2. No.009：Palindrome Number

    问题: Determine whether an integer is a palindrome. Do this without extra space. 官方难度: Easy 翻译: 不使用额外空 ...

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

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

  4. 变通实现微服务的per request以提高IO效率

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  5. 如何使用jQuery 制作全屏幕背景的嵌入视频

    实际效果查看:http://keleyi.com/keleyi/phtml/jqtexiao/28.htm 请使用支持HTML5的浏览器查看本效果. 完整代码如下: <!doctype html ...

  6. DevExpress TreeList使用心得

    来自:http://www.cnblogs.com/sndnnlfhvk/archive/2011/05/15/2046920.html 最近做项目新增光纤线路清查功能模块,思路和算法已经想好了,些代 ...

  7. Android中GridView通过自定义适配器（未优化）实现图文视图排列

    Android中GridView组件用来以网格方式排列视图,与矩阵类似,当屏幕上有很多元素(文字.图片或其他元素)需要显示时,可以使用该组件.下面我们通过代码实现如下图例(为了方便截图,将事件处理(土 ...

  8. Android Studio 快捷键一览

    刚从 eclipse 转到 android studio 的同学,编写代码时使用的快捷键不同,一时难以适应,当然可以通过设置,将快捷键模板设置成与 eclipse 相同的,但我个人不赞成,因为 And ...

  9. css解决方案

    1,Flexbox(更优雅的布局) ①居中:{display:flex; justify-content:center; align-items:center;}②设定flex-grow属性的话,会自 ...

  10. Why Do We Need a Data Warehouse?

    https://dwbi1.wordpress.com/2012/12/03/why-do-we-need-a-data-warehouse/ 经常有人来质疑数据仓库的价值,为什么我们需要花费一年多的 ...