Html 简单CSS：使列背景对齐

我知道这对有CSS经验的人来说很容易。我在这里制作了一个代码模型来展示我所拥有的。我正在尝试获得背景色，粉色和绿色，延伸到白色列的底部。。。或者哪一个最长。我想得很清楚：两者都会起作用，但我遗漏了一些我知道很简单的东西。感谢帮助，期待窃笑者

身体{
背景颜色：浅蓝色；
}
#主列{
浮动：左；
左边距：0；
右边距：0；
宽度：830px；
背景色：白色；
}
#左列{
浮动：左；
左边距：0；
右边距：0；
宽度：195px；/*修改-缩短*/
背景颜色：粉红色；
}
#右栏{
浮动：左；
宽度：195px；
背景颜色：绿色；
}
#包装纸{
背景色：黑色；
}
.clearit{
明确：两者皆有；
}
一些内容
Lorem ipsum dolor sit amet，是一位杰出的献身者。库拉比图尔·乌拉姆科珀·乌尔纳（Curabitur ullamcorper urna a magna euismod）是一位伟大的作家，他的一生都是封建的。佩伦茨克酒后驾车。乌贼舌，乌贼舌，乌贼舌。精英馆长，精英生活。不，不，不，不，不，不，不，不，不。埃尼安·埃吉特·普鲁斯·埃拉特。在auctor中，dapibus imperdiet中的ipsum，NullaElite posuere neque，ultrices convallis ligula odio eget felis。梅塞纳斯·奎斯·图皮斯·努拉。不，不，不，不，不。Donec vitae venenatis libero。奥古斯都和达皮布斯的智囊团在一起。
更多内容
继续生活

一种解决方案是将左列和右列放置在

main列中，并使用
display:table
和
display:table cell

css

body {
    background-color:lightblue;
}
#mainColumn {
    margin-left: 0;
    margin-right: 0;
    width: 830px;
    background-color: white;
    display: table;
}
#leftColumn {
    display: table-cell;
    margin-left: 0;
    margin-right: 0;
    width: 195px;
    /* modified - shortened */
    background-color:pink;
}
#rightColumn {
    display: table-cell;
    width: 195px;
    background-color:green;
}
#myWrapper {
    background-color: black;
}
.clearit {
    clear: both;
}

白色列你是说这个
#主列
？我很困惑。你希望所有列的高度都一样吗？是的，没错-对不起，我说得不好。我希望所有三列都用颜色填充最长列的整个高度。这对我来说很有用。我甚至没有听说过显示：桌子的功能，所以这是一个很大的帮助。谢谢
body {
    background-color:lightblue;
}
#mainColumn {
    margin-left: 0;
    margin-right: 0;
    width: 830px;
    background-color: white;
    display: table;
}
#leftColumn {
    display: table-cell;
    margin-left: 0;
    margin-right: 0;
    width: 195px;
    /* modified - shortened */
    background-color:pink;
}
#rightColumn {
    display: table-cell;
    width: 195px;
    background-color:green;
}
#myWrapper {
    background-color: black;
}
.clearit {
    clear: both;
}