JS Fiddle: Making div occupy 100% height

Question

I was preparing a fiddle to ask another question but stumbled into an other issue when making fiddle of that.

Here's the link to fiddle.

HTML Code:

<div class="outer-container">
            <div class="inner-container">
                <div class="slider-one slide" style="background-image:url('http://208.131.135.54/~imacre17/wp-content/uploads/2015/03/homeslide1a.png'); height: 100%; background-size: cover;" class="slider-background-image' ">
                    <div class="slide-inner-container">

                        <div class="clearfix"></div>
                    </div><!-- /.slide-inner-container -->
                </div><!-- /.slide -->
                <div class="slider-one slide" style="background-image:url('http://208.131.135.54/~imacre17/wp-content/uploads/2015/02/2-Home-membership.jpg'); height: 100%; background-size: cover;" class="slider-background-image' ">
                    <div class="slide-inner-container">
                        <!-- More content here soon -->
                    </div><!-- /.slide-inner-container -->
                </div><!-- /.slide -->
                <div class="slider-one slide" style="background-image:url('http://208.131.135.54/~imacre17/wp-content/uploads/2015/02/2-Home-special-events.jpg'); height: 100%; background-size: cover;" class="slider-background-image' ">
                    <div class="slide-inner-container">
                        <!-- More content here soon -->
                    </div><!-- /.slide-inner-container -->
                </div><!-- /.slide -->
                <div class="slider-one slide" style="background-image:url('http://208.131.135.54/~imacre17/wp-content/uploads/2015/03/CORKHome-_position4.jpg'); height: 100%; background-size: cover;" class="slider-background-image' ">
                    <div class="slide-inner-container">
                        <!-- More content here soon -->
                    </div><!-- /.slide-inner-container -->
                </div><!-- /.slide -->


            </div><!-- /.inner-container -->
        </div><!-- /.outer-container -->

There are four div with class of .slide, each one of them has a background image added to it as inline-style. Each div also has 100% height applied to it.

If I apply the same styles in a HTML page all is well, here's the link. How do I make the div occupy 100% height.

Answer 1

You can add position:fixed; height:100%; to slide class

Answer 2

My jquery code was wrong:

this code:

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

$("*").css({"width": viewportWidth, "height": viewportHeight});

Solved the issue.