Setting div height to 100%

Question

I have 4 DIVs positioned like viewed in image. Div1 and Div 2 And Div 3 are placed inside the Footer Div. The contents of 3 Divs are dynamic and I don't know what height they need. How can I set these 3 divs height to a same value? I've tried different solutions like setting top and button to 0px as here mentioned:
Make div 100% height of browser window

This is what I currently have: Divs

This is my HTML Layout:

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

This is my CSS Classes:

.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;
}

why do you need to have the same height? [Faux columns](http://alistapart.com/article/fauxcolumns)? — Fabrizio Calderan, Jan 16 '14 at 10:15

score 4 · Accepted Answer · answered Jan 16 '14 at 10:14

Like this

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;
}

score 0 · Answer 2 · edited May 23 '17 at 10:32

0

You seem to have the same problem as this individual:

How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?

This should solve your problem and help with similar problems in the future:

Equal Height Columns with Cross-Browser CSS

edited May 23 '17 at 10:32

Community

1
1

answered Jan 16 '14 at 10:29

Ashton Six

514
5
20

Setting div height to 100%

2 Answers2