3 columns + 100% height

Question

I need same as in the http://blog.html.it/layoutgala/LayoutGala19.html but height of each column should be 100% and height of whole page should be min 100%. Can anybody help?

There are so many ways to do this it's not even funny. Look in the right column with the header **Related**: http://stackoverflow.com/questions/10086007/css-3-column-height-100?rq=1 — ThinkingStiff, Mar 11 '13 at 03:59
Lets play a little bit http://jsfiddle.net/2wdeB/2/. Looks good but if we will resize our window then we will get http://i.imgur.com/5x1HxME.png?1. So this is not good — Eugene Testerov, Mar 11 '13 at 04:43

score 2 · Accepted Answer · edited May 23 '17 at 12:32

2

You should probably look at the question: How to have multiple columns that consume 100% height using twitter bootstrap?

They mention this link (and you can see the source code here) that I think is what you are looking for. You have to set height: 100% for <html> and <body>, and then, the container should have a min-height: 100%

edited May 23 '17 at 12:32

Community

1
1

answered Mar 11 '13 at 04:02

yorch

7,170
8
32
38

http://fiddle.jshell.net/teresko/EkTVv/show/ Your example looks good. I see there is padding-bottom, margin-bottom technique as well. I will try to apply it for my issue. – Eugene Testerov Mar 11 '13 at 05:00
Thanks a lot. Completed examples special for my issue: http://fiddle.jshell.net/2wdeB/6/show/light/ and http://jsfiddle.net/2wdeB/6/ – Eugene Testerov Mar 11 '13 at 05:35

score 0 · Answer 2 · answered Mar 19 '19 at 22:04

I was trying to get this layout by using CSS grid, but unfortunately I don't think its possible. Using floats is an easy way to do this.

* {
  margin: 0;
  padding: 0;
}

body, html {
  height: 100%;
}

.box {
  height: 100%;
}

.box1 {
  float: left;
  width: 20%;
  background-color: red;

}

.box2 {
  float: left;
  width: 60%;
  background-color: green;

}

.box3 {
  float: left;
  width: 20%;
  background-color: blue;
}

<html>
  <body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
  </body>
</html>

Then the text can be placed in each column exactly where you want, using absolute/relative positioning.

EDIT: You can also use Flexbox to do this pretty easily.

3 columns + 100% height

2 Answers2

Linked