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

  • 相关阅读:
    python爬取酷狗音乐
    python爬取酷我音乐
    排列组合+逆元模板
    python爬取QQVIP音乐
    一维数组的动态和
    买卖股票的最佳时机 II
    最佳买卖股票时机含冷冻期
    买卖股票的最佳时机
    子集
    最短无序连续子数组
  • 原文地址:https://www.cnblogs.com/weiyunblogs/p/7536183.html
Copyright © 2011-2022 走看看