Html 使浮动div扩展到页面高度

我有两个列，一个具有灵活的宽度，另一个应该扩展到剩余的宽度。 我有这样的设置：

.container {
   height: auto;
   overflow: hidden;
}

.right {
    width: 80px;
    float: right;
    background: #aafed6;
    position:relative; /* Needed for positioning an element absolutely inside this dib */
}

.left {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
}

这是小提琴：

我的问题是，我希望右div与左div具有相同的高度。如何在保持当前结构的同时做到这一点

谢谢！Uri

此解决方案有效

CSS添加

添加

位置：相对到您的
.container
类。然后添加
位置：绝对，
顶部：0，
底部：0和<代码>右侧：0到你的
。右
类

.container {
   height: auto;
   overflow: hidden;

   /* Added */
   position:relative;
}

.right {
    width: 80px;
    background: #aafed6;

    /* Added */
    position:absolute;
    top:0;
    right:0;
    bottom:0;
}

您可以向两个div添加填充底和边距底。请检查小提琴

.right{
    padding-bottom: 500em;
      margin-bottom: -500em;
}

.left{
    padding-bottom: 500em;
      margin-bottom: -500em;
}

对于容器div使用
display:table
，对于子div使用
display:table cell
怎么样

以下是编辑后的JSFIDLE-
♦  ♦  我相信你会发现其他类似的问题。太棒了！我怎么没有想到这一点。很好，谢谢。