如何让这个例子的元素高度自适应?

Question

如图:

如何让元素a实现高度自适应?
我的方案:

.outer{
    overflow:hidden;
    width:500px;
    background:yellow;
    padding: 4px;
}

.left, .right{
    float: left;
}

.left{
    background:lightgreen;
    width:20%;
    height:100%; /* 无效 */
}

.right{
    background:blue;
    width:80%;
}

<div class="outer">
  <div class="left">元素a</div>
  <div class="right">sjwicnao<br>asjdioasjdiaso<br>asdiaosdjioasd<br>asdjiasdjio</div>
</div>

用flex是可以的,如果用非flex方案,是否还有其他解决方法?

Answer 1

提供几个方法 1：父元素相对定位 要自适应的元素绝对定位height：100%，这样可以height100%可以生效`

        .box{
            background-color: #ccc;
            width: 500px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }
        .left{
            position: absolute;
            top: 0;
            background-color: #ff0000;
            width: 20%;
            height: 100%;
        }
        .right{
            margin-left: 20%;
            width: 80%;
            background-color: #00ff00;
        }`
        2：要自适应的元素 padding-bottom：10000px; margin-bottom:-10000px;父元素overflow:hidden

Answer 2

我曾经也做过这种，不过是整个框架div页面高度为100%，为何无效，因为父元素也要设置。所以我设置为

html,body{
height:100%;
}