Q:

Set div height to fit to the browser using CSS

I have two DIVs inside a container div, where I need to set them both to fit to the browser window like below, but it doesn't fit in my code, please suggest me a solution

My Style Sheet code
 html, body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;

            }

.container {
    height: auto;
    width: 100%;
}
.div1 {
    float: left;
    height: 100%;

    width: 25%;
}
.div2 {
    float: left;
    height: 100%;
    width: 75%;
}

Body
<body>
<div class="container">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

A:

You could also use viewport percentages if you don't care about old school IE.
height: 100vh;

A:

Setting window full height for empty divs
1st solution with absolute positioning - FIDDLE
.div1 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25%;
}
.div2 {
  position: absolute;
  top: 0;
  left: 25%;
  bottom: 0;
  width: 75%;
}

2nd solution with static (also can be used a relative) positioning & jQuery - FIDDLE
.div1 {
  float: left;
  width: 25%;
}
.div2 {
  float: left;
  width: 75%;
}

$(function(){
  $('.div1, .div2').css({ height: $(window).innerHeight() });
  $(window).resize(function(){
    $('.div1, .div2').css({ height: $(window).innerHeight() });
  });
});

A:

Man, try the min-height.
.div1 {
    float: left;
    height: 100%;
    min-height: 100%;
    width: 25%;
}
.div2 {
    float: left;
    height: 100%;
    min-height: 100%;
    width: 75%;
}

