css - 将 div 高度设置为 100%

Question

我有 4 个 DIV，其位置与图片中所示的一样。 Div1 和 Div 2 和 Div 3 放置在页脚 Div 内。 3个div的内容是动态的，不知道需要多少高度。如何将这 3 个 div 高度设置为相同的值？我尝试了不同的解决方案，例如将顶部和按钮设置为 0px，如下所述:
Make div 100% height of browser window

这是我目前拥有的:

这是我的 HTML 布局:

<div class="About">
<div class="RightAbout">
</div>
<div class="CenterAbout">
</div>
<div class="LeftAbout">
</div>
</div>

这是我的 CSS 类:

.About
{    
    padding:0px;
    background-color:#757575;
    border:none;
    min-height:250px;
    color:White;
    font-size:12pt; 
}
.RightAbout
{
    display:inline-block;
    width:290px;
    min-height:100%;
    border-left:solid 1px #CDCDCD;
    margin:0px 0px 0px 0px;
    padding:0px 5px 0px 5px;
    vertical-align:top;
    background-color:blue;
}


.CenterAbout
{
    display:inline-block;
    width:290px;
    min-height:100%;
    border-left:solid 1px #CDCDCD;
    margin:30px 0px 30px 0px;
    padding:0px 5px 0px 5px;
    vertical-align:top;
}
.LeftAbout {
    display: inline-block;
    min-height:100%;
    border: none;
    padding: 0px 5px 0px 5px;
    margin: 30px 0px 30px 0px;
    vertical-align: top;
}

Answer 1

像这样

demo

CSS

body, html {
  height: 100%;
}


.About
{    
    padding:0px;
    background-color:#757575;
    border:none;
    min-height:250px;
    color:White;
    font-size:12pt; 
    display:table;
}
.RightAbout
{
    display:table-cell;
    width:290px;
    min-height:100%;
    border-left:solid 1px #CDCDCD;
    margin:0px 0px 0px 0px;
    padding:0px 5px 0px 5px;
    vertical-align:top;
    background-color:blue;
}


.CenterAbout
{
    display:table-cell;
    width:290px;
    min-height:100%;
    border-left:solid 1px #CDCDCD;

    vertical-align:top;
     background-color:#757575;
}
.LeftAbout {
   display:table-cell;
    min-height:100%;
    border: none;
    width:290px;

    vertical-align: top;
     background-color:#757575;
}