Html css如何使列自动填充背景色到100%的高度

我有以下代码：

#左{
浮动：左；
宽度：180px；
背景色：#ff0000；
}
#对{
溢出：隐藏；
背景色：#00FF00；
}

左边
右
向下

.main表{
显示：表格；
}
#左{
显示：表格单元格；
浮动：无；
宽度：180px；
背景色：#ff0000；
}
#对{
显示：表格单元格；
溢出：隐藏；
背景色：#00FF00；
}

左边
右
向下

您可以在此处使用flexbox。演示：

.container{
/*成为一个灵活的容器*/
/*默认情况下，弹性项将垂直拉伸*/
显示器：flex；
}
#左{
宽度：180px；
背景色：#ff0000；
}
#对{
/*占据剩余宽度*/
弹性：1；
背景色：#00FF00；
}

左边
正确的

向下

需要理解为什么

#left

不采用

高度
100%
，这是因为您在#left中使用了
float:left
属性。因此，每当在元素上使用float left时，默认情况下会将其显示更改为
inline block
，这就是您必须更改父div的显示以克服此问题的原因

下面是使用flex的示例


div{
显示器：flex；
}
左分区{
宽度：180px；
背景色：#ff0000；
}
对{
弹性：1；
溢出：隐藏；
背景色：#00FF00；
}

左边
右
向下
它与我的答案有什么不同？@VadimOvchinnikov添加了两种方式，即使用table和flex。OP要求flex。但我需要其他人理解为什么它不起作用，即身高100%。我需要添加一个Flex代码，就像你添加了一个我用过的div类一样。只是为了那个浮点，我需要添加这个代码。