Three horizontally aligned divs having the same height based on percentage

Question

I have the following code:

The html code:

<div class="Row">
<div class="Column">C1<br>asdasd</div>
<div class="Column">C2</div>
<div class="Column3">a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br></div>

The css code:

.Row
{
    display: table;
    width: 100%;
    table-layout: fixed;
    border-spacing: 10px;
    height: 30%;
}
.Column
{
    display: table-cell;
    background-color: #0099ff;
}
.Column3
{
    display: table-cell;
    background-color: #0099ff;
    height: 30%;
    overflow: scroll;
}

I have aligned the three divs horizontally as shown in the fiddle code, but I want to have the height of all the divs to be fixed at 30% the screen size, no matter how big the content is inside any one of the divs. As seen in the fiddle code, the divs auto scale to the maximum height of the div which has the most content in it.

Is there any way to restrict the div height to 30 in percentage and not pixels, such that it gets applied to all the remaining divs in the same row using css only.

I did happen to read the following link for equal heights in div but it is related to setting the height of all the divs to element that has the maximum height. The equal height link

Any help would be appreciated. Thanks.

score 0 · Answer 1 · answered Jun 11 '16 at 20:35

0

Maybe something like:

.Column {
    height: 30vh;
    overflow-y: auto;
}

answered Jun 11 '16 at 20:35

Dylan

495
1
6
19

score 0 · Answer 2 · answered Jun 11 '16 at 21:16

if you have to use table:

.Row
{
    display: table;
    width: 100%;
    table-layout: fixed;
    border-spacing: 10px;
}
.Column,
.Column3
{
    display: table-cell;
    background-color: #0099ff;
}
.inner{/*put extra div inside table cell*/
   max-height: 30vh;
   overflow: auto;
}

This is because you can not restrict the height of table or table cells. Put an extra div inside table cells and restrict the height of the div.

If you don't have to use table, and does not worry about old browsers, do some research on flex-box, and you can use that, which is a lot easier.

If you don't have to use table, but can't use flex box, you can try display: inline-block:

.Row
{
    width: 100%;
}
.Column,
.Column3{
    display: inline-block;
    vertical-align: top;
    background-color: #0099ff;
    width: calc(100% / 3 - 10px);
    height: 30vh;
    margin: 5px;/*for the border-spacing*/
    overflow: auto;
}

and in case you don't know this, vh is a length relative to the viewport height, so 30vh is 30% of viewport height. and calc does calculations, depend on which browsers you need to support, you might not be able to use those, though.

Three horizontally aligned divs having the same height based on percentage

2 Answers2