css中如何实现左边的高度随着右边改变而改变

css中如何实现左边的高度随着右边改变而改变

html结构：

<div class="main">
    <div class="main_left"></div>
    <div class="main_right></div>
</div>

css样式：

.main{ overflow: hidden; }
.main_left{ width: 20%;  height:100%; float: left; background-color: #fff; padding-bottom:9999px; margin-bottom:-9999px;}
.main_right{ width: 80%; float: right; box-shadow: inset 0 0 5px #000; padding:15px; box-sizing: border-box; height: 100%; overflow: hidden; }

实际上起到核心作用的是padding-bottom:9999px; margin-bottom:-9999px;这一部分让div填充满整个父框架