Skip to content Skip to sidebar Skip to footer
Home / Css / Html

3 Columns + 100% Height

Post a Comment
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?

Solution 1:

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%


Solution 2:

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.


Post a Comment for "3 Columns + 100% Height"