Setting height of div to based on the visible area

Question

In the following HTML I've manually set the height of the middle div to 200px. How can I adjust this height automatically so that the height of the div equals to the height of the visible area in the browser? Can this be done with pure CSS or do I need JavaScript?

<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>

<div class="parallax"></div>

<div class="red">
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>

And the CSS:

.parallax {
    /* The image used */
    background-image: url("http://az-themes.bluxart.netdna-cdn.com/ibuki/wp-content/uploads/2014/06/blog-img.jpg");

    /* Set a specific height */
    height: 200px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.red {
  height:1000px;
  background-color:red;
  color:white;
  font-size: 40px;
}

Wokring example can be found here.

Answer 1

Use the vh unit for this - so 200px becomes 100vh to fill the complete height of the screen.

But make sure you include a min-height, for the times when your content is more than the viewport can display.

As to the compatibility of this:

http://caniuse.com/#feat=viewport-units

Firefox: Supported since Firefox 19 (2013)

Chrome: Supported since partially since Chrome 20 (2012), total support since Chrome 26 (2013)

Safari: Supported since partially since Safari 6 (2012), total support since Safari 6.1 (2013)

IE: Partial support since IE 9 (2011)

Edge: Partial support since Edge 12 (2015)

When I say partial support, in all these cases it is that they don't support vmax, which you aren't using for this anyway.

.parallax {
  /* The image used */
  background-image: url("http://az-themes.bluxart.netdna-cdn.com/ibuki/wp-content/uploads/2014/06/blog-img.jpg");
  /* Set a specific height */
  height: 100vh;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.red {
  height: 1000px;
  background-color: red;
  color: white;
  font-size: 40px;
}

<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>

<div class="parallax"></div>

<div class="red">
  Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling. Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>

You can also do this using jQuery, using .height() to get the window height.

$(document).ready(function() {

  wh = $(window).height();

  $(".parallax").css({
    "height": wh
  });

});

.parallax {
  /* The image used */
  background-image: url("http://az-themes.bluxart.netdna-cdn.com/ibuki/wp-content/uploads/2014/06/blog-img.jpg");
  /* Set a specific height */
  height: 100vh;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.red {
  height: 1000px;
  background-color: red;
  color: white;
  font-size: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>

<div class="parallax"></div>

<div class="red">
  Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling. Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>