CODEWITHSUNDEEP
csshtmlcss-float
bendtherules
bendtherules

Reputation: 382

How to set two floated divs to be the 100% height of the page

There are two floated divs of different height inside a wrapper div. I need both of them to be 100% of height of the body i.e. of the same height. Also used clearfix. But height:100% doesnt seem to work. How to do this?

Demo

Html:

        <div class="wrapper">
            <div class="primary">
                <img src="http://demo1.opentaps.org/images/products/small/gis_computer_glen_rolla.png" />
            </div>
            <div class="secondary">
                <img src="http://demo1.opentaps.org/images/products/small/gis_computer_glen_rolla.png" />
            </div>
            <div class="clearfix">

            </div>
        </div>

CSS:

body {
    min-height: 100vh;
    background-color: green;
    margin: 0;
}

.wrapper{
    background-color: blue;
  height: 100%;
}

.primary{
    float: left;
    width: 80%;
    height: 100%;
    background-color: yellow;
}

.primary img{
    height: 100px;
    width: 100px;
}

.secondary{
    float: right;
    width: 20%;
    background-color: red;
  height: 100%;
}

.secondary img{
    height: 500px;
    width: 100px;
}

.clearfix{
    clear: both;
}

Upvotes: 0

Views: 283

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105863

if you want to use vh units (seen in your code), it does makes it easier, no need to worry about 'heritage' and see your columns being stopped at 100% height of the window.

if you mix the method of faux-column and clear fix , you need to set only once min-height:100vh; on the floatting element.

Your yellow background has to be drawn in the wrapper and the red one in the non-floatting element wich is stretch with the clearfix method.

body {
  margin: 0;
}
.wrapper{
  background-color: yellow;
  overflow:hidden;
}
.primary{
  float: left;
  width: 80%;  
  min-height:100vh;
}
.wrapper .primary img{
  height: 100px;
  /* width:1000px; */
  width: 100px;
}

.secondary .overflow{
  margin-left:80%;
  background-color: red;
}
.overflow:after {
  content:'';
  height:0;
  display:block;
  clear:both;
}
.secondary img{
  height: 500px;
  /*height:100px;*/
  width: 100px;
}

uncomment height value for image to check behavior and drawing of your page, scrolling or not . http://codepen.io/anon/pen/chHtK

Hope this helps you to understand the use of vh (or vw) units , for the faux-column and clearfix methods, it's just a reminder of old methods :)

Enjoy

Upvotes: 1

Tom McClure
Tom McClure

Reputation: 6729

The html element also needs to be 100% - try this:

html { height: 100%; }
body {
    height: 100%;
    background-color: green;
    margin: 0;
}

Upvotes: 0

ESR
ESR

Reputation: 1679

All you need to do is add a height of 100% to the html and body tags like so:

html, body {
   height: 100%;
}

Demo:

http://jsbin.com/EsOfABAL/1/

Upvotes: 2

Related Questions