height:100%和height:inherit差异演示实例页面

代码：

CSS代码：

.outer {
    display: inline-block;
    height: 200px; width: 40%;
    border: 5px solid #cd0000;
}
.height-100 {
    position: absolute;
    height: 100%; width: 200px;
    background-color: #beceeb;
}
.height-inherit {
    position: absolute;
    height: inherit; width: 200px;
    background-color: #beceeb;
}

HTML代码：

<div class="outer"><div class="height-100"></div></div>
<div class="outer"><div class="height-inherit"></div></div>

效果：

height:100%;

height:inherit;