Html 在CSS中扩展div高度

所以在我的页面上，我有一个两列布局——75%（左蓝色）和25%（右红色）。我无法让红色的栏填满。在Chrome的inspector中，我看到分类为

的

容器已垂直扩展到
#left
，但我无法说服
#right
适当扩展。下面是我的css和html的JFIDLE链接（后面是代码本身，以防您不想点击修补）：

请注意：在我的实际开发代码中，我没有使用蓝色和红色（左和右div背景色）-我分别使用白色和海军蓝


您可以使用
display:table cell
而不是默认的
display:block
，因此不需要
float:left\right
：

#left, #right {
   display:table-cell;
}

这是有效的

.container {
width: 100%;
min-height: 100%;
overflow: auto;
display:flex;
}
.container #left,.container #right{
    -webkit-flex: auto;
    -ms-flex:auto;
    flex:auto;
}

这里是工作演示
我不理解变化的行为……你能解释更多吗？我发誓我以前试过，但它不起作用，但我只是再试了一次，它成功了。我觉得很累，被CSS打败了。谢谢@Pilot:要使div具有相同的高度，OP可以使用
表格单元格
布局而不是
块
@Pilot:with
float:left/right
在正常流中显示为
block
元素，因此
高度
不同。@Notulysses否..根本原因在于
flot:left/right
它们被渲染高度等于内容高度而不是父级高度..感谢发表评论..询问原因只是为了给你的答案增加价值，除非你知道错误是什么。老实说，我更喜欢这个答案，因为它使用flex。但这会引起兼容性问题吗？它似乎也会把填充物扔出窗外。老实说，我认为safari不支持flex。但您可以使用bob flex，它在所有主流浏览器中都受支持
#left, #right {
   display:table-cell;
}

.container {
width: 100%;
min-height: 100%;
overflow: auto;
display:flex;
}
.container #left,.container #right{
    -webkit-flex: auto;
    -ms-flex:auto;
    flex:auto;
}