css之height: 100%的有效场景

在css的日常应用中，经常会遇到想要通过 height: 100%来达到使子盒子与父盒子高度一样的目的，但是偶尔明明设置了height: 100%，但是却没有达到想要的结果，这次我们就一起探索一下，什么情况height: 100%有效，什么时候无效。

有效的情况

1. 当父元素有固定高度时，子盒子可以直接使用height: 100%达到与父盒子高度相同的目的；

2. 倘若父盒子是其中一个子盒子的高度撑开的时候，另外一个子盒子怎样才能通过height: 100% 使之高度与父盒子相同呢？其实也是有办法的，在这里我们通过子绝父相的方法。请看下面的示例：
   html为：

   <div class="wrapper">
     <div class="left">我是左边</div>
     <div class="right">我是右边</div>
   </div>

   css为：

    position: relative;
     /* 触发dfc，使父元素的高度等于float的盒子 */
     overflow: hidden;
     width: 100%;
     background-color: pink;
   }
   .left {
     float: left;
     height: 300px;
     width: 200px;
     background-color: red;
   }
   .right {
     position: absolute;
     left: 200px;
     height: 100%;
     background-color: blue;
   }

   效果为
   

无效的情况（当父盒子被其中一个盒子的高度撑开时）

1. 要设置的盒子都是inline-block时无效；
2. 要设置的盒子为float元素时无效；
3. 要设置的盒子为除了position的其他定位时无效；
4. 要设置的盒子为flex元素时无效；