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(".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.

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.bluxartdna-cdn./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.

• javascript
• html
• css
• parallax

• 1 Use 100vh (vh unit is viewport height) as the height in css. the 100 is telling it to be 100& of the viewport height. You also have vw for width. – creativekinetix Commented Feb 15, 2017 at 9:12
• Browser support for vh: caniuse./#feat=viewport-units – Sebastian Commented Feb 15, 2017 at 9:13
• It's pretty widely supported. Even in IE you are only losing out on the vmax unit. There are other bugs related to printing and 3d transforms etc but I don't think those are much of an issue here. – creativekinetix Commented Feb 15, 2017 at 9:16
• @creativekinetix Seems like a very new feature. Are you sure it's widely supported? According to the patibility table provided by Sebastian, only 4% of Firefox users and 21% of Chrome users have the patible version. – Meysam Commented Feb 15, 2017 at 9:21
• @Meysam no - 77.17% of users have it fully supported, and 6.9% have it partially supported, making up for 84.07% supported - these are overall browser totals - not the amount of chrome or firefox users - so 21% is users using chrome instead of another browser – CalvT Commented Feb 15, 2017 at 9:23

1 Answer 1

Use the vh unit for this - so 200px bees 100vh to fill the plete 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 patibility of this:

http://caniuse./#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.bluxartdna-cdn./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.bluxartdna-cdn./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./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>