zoukankan      html  css  js  c++  java
  • 高度自适应,height与min-height

    height:100%;和height:inherit的异同

      1、兼容性差异

        height:100%; ie6+

        height:inherit; ie8+

      2、除去兼容性,大多数height:100%与height:inherit都表现为height:auto;

      3、绝对定位却不同,当子元素的高度大于父元素的高度时,height:inherit 比 height:auto;好用多了

        height:inherit;会让子元素限制在父容器内,而加上height:auto;的属性的子元素会超出父元素的

    height:100%;与min-height的用法

      1、当子容器的高度超过父容器的时候,父容器会被子容器撑开

        解决办法1、height:inherit;

        解决办法2、给子元素加上min-height:0;

    我最近做了一个项目就是子元素的高度大于父容器,结果把父容器撑开了,先说说我的页面大致结构

    html:

      <body>

        <header></header>

        <section></section>

        <footer></footer>

      </body>

    css:

      body{

        100%;

        height:100%;

        display:flex;

        display:-webkit-flex;

      }

      header{

        100%;

        height:100px;

      }

      section{

        100%;

        min-height:0;

        flex:1;

        -webkit-flex:1;

        overflow:hidden;

      }

      footer{

        100%;

        height:100px;

      }

    以上是我一个移动端项目,用了min-height:0;很好的解决了子元素超出父容器的情况

    ps:当时试用了height:inherit;也是可以的、、、

  • 相关阅读:
    MySQL 5.6 中 TIMESTAMP 的变化
    NetWork
    Esper
    maven nexus linux私服搭建
    file not found app文件
    设计模式之十五:訪问者模式(Visitor Pattern)
    邻接表 几篇不错的解说
    自己定义带三角形箭头的TextView
    linux程序调试命令addr2line之入门简单介绍(本文先不聊gdb调试)
    AndroidManifest 中android:exported
  • 原文地址:https://www.cnblogs.com/weiyunblogs/p/7536183.html
Copyright © 2011-2022 走看看