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;也是可以的、、、

  • 相关阅读:
    原理Lambda表达式
    关于Web.config的debug和release.config文件
    利用GeoIP数据库及API进行地理定位查询 Java
    JSONP跨域的原理解析
    如何处理JSON中的特殊字符
    IIS下防止mdb数据库被下载的实现方法
    点击文字选中radio
    关于微信40029错误
    nopcommerce的WidgetZones
    js判断移动终端(手机浏览器)
  • 原文地址:https://www.cnblogs.com/weiyunblogs/p/7536183.html
Copyright © 2011-2022 走看看