3 columns with 100% height

Question

I have a container div box which contains three left floated divs. The left one is my left sidebar, the middle is the content area and the right one is the right sidebar. The container height depends on the largest div inside. What i want is that all three inner divs always have 100% height of the container. I tryed it with 100% height and 100% min-height but the two smaller div boxes only extend to the size of there content.

I can't set the container height to 100%, because there auch some other things above and beneath.

<div id="container">
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</div>

See jsFiddle

Please have a look at this [one](http://stackoverflow.com/questions/18934141/set-div-height-to-fit-to-the-browser-using-css).This may help you. — srinatht, Dec 30 '15 at 10:49
Duplicate - http://stackoverflow.com/questions/4804581/css-expand-child-div-height-to-parents-height/4804706#4804706 — Paulie_D, Dec 30 '15 at 10:53

score 0 · Answer 1 · answered Dec 30 '15 at 10:45

Flexbox can do that.

#container {
  width: 90%;
  margin: 1em auto;
  display: flex;
  border: 1px solid grey;
}
[id*="col"] {
  padding: .25em;
  background: lightblue;
  border: 1px solid green;
  width: 33%;
}

<div id="container">
  <div id="col1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam natus amet perferendis voluptatibus repudiandae accusamus unde consectetur, veritatis quod dolorem ullam, ipsum odio numquam? Itaque?</div>
  <div id="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit ex nihil, eligendi deleniti rem. Quam saepe, tempore nesciunt dignissimos neque quasi tenetur corrupti, rem ipsa sapiente cum tempora excepturi. Dicta eum reprehenderit, soluta esse quibusdam
    quisquam deserunt quidem, quo, quos numquam nisi omnis eius possimus! Rem nulla, molestiae aliquam facere!</div>
  <div id="col3">Lorem ipsum dolor sit.</div>
</div>

when i use display:flex my whole design goes to hell XD I think i have to find out how flex works first. I will check it out :) — Verdemis, Dec 30 '15 at 10:54
Then it's possible there is something you haven't told us....is there more HTML than you have indicated...perhaps there are other things in the container? — Paulie_D, Dec 30 '15 at 10:58

Johannes · Answer 2 · 2015-12-30T11:03:40.137

0

Use this CSS for it:

#container { display: table; }
#col1, #col2, #col3 { display: table-cell; }

Here's a fiddle: https://jsfiddle.net/aL5apudm/ (#container width is 100%, flex and float settings are taken out)

edited Dec 30 '15 at 11:03

answered Dec 30 '15 at 10:46

Johannes

64,305
18
73
130

i tryed it, but until now it doesn't work. Maybe i'm missing something. But i will check it out further – Verdemis Dec 30 '15 at 10:56
it also depends on the rest of your CSS. Don't use float or flex stuff in combination with these settings – Johannes Dec 30 '15 at 10:58
please see the fiddle in the answer – Johannes Dec 30 '15 at 11:03

score 0 · Answer 3 · answered Dec 30 '15 at 10:53

html

<div class="container">
      <div class="l">sdffff<br/>fffffffffffffff<br/>fffffffffffffffffff</div>
     <div class="c">fffffffff</div>
     <div class="r">ffffffffffffffffffffffffff</div>
</div>

css

.container{
  height:auto;
  width:700px;
  background:#ff0;
  overflow: hidden;
    position: relative;
    display: table;
}
.l{
  width:200px;
  display: table-cell;
  background:#ccc;
}
.c{
  width:200px;
  display: table-cell;
  background:#ddd;
}
.r{
  width:200px;
  display: table-cell;
  background:#eee;
}

demo

score 0 · Answer 4 · answered Dec 30 '15 at 13:00

Successfully Done :-D

.table {
  display: table;
  height: 100%;
  border: solid red;
}
.cell {
  border: 2px solid black;
  vertical-align: top;
  display: table-cell;
  height: 100%;
}
.container {
  height: 100%;
  border: 2px solid green;
  -moz-box-sizing: border-box;
}

<div class="table">
  <div class="cell">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
  </div>
  <div class="cell">
    <div class="container">Text</div>
  </div>
  <div class="cell">
    <div class="container">Text</div>
  </div>
</div>

eye-wonder · Answer 5 · 2016-05-04T00:30:32.850

Set the sidebar color on the .container and the body background color on .col2:

#container {
  background-color:silver;
}
body, #col2{
  background-color:white;
 }

Se fiddle https://jsfiddle.net/zuncevka/5/

Different sidebar colors can be solved by using a gradient:

#container {
  background: linear-gradient(to right, #cccccc 0%,#cccccc 20%,#ffffff 20%,#ffffff 80%,#deccde 80%,#deccde 100%);
}

https://jsfiddle.net/zuncevka/4/

3 columns with 100% height

5 Answers5