Jquery window height calculation

Question

I use a jquery script to size a div, the code seems to work well on a CodePen but not in my document

<head>
    <style type="text/css">
        body {
            margin: 0px;
        }

        .splaix {
            position: relative;
            background-image: url(http://carmemarin.net/img/splaix/escales.jpg);
            background-size: cover;
            background-position: center;
        }

        .mes {
            height:2000px;
        }
    </style>

</head>

<body>
    <div class="splaix"></div>
    <div class="mes"></div>

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>
        function resizeDiv() {
            var vph = $(window).height();
            $('.splaix').css({'height': vph + 'px'});
        }

        $(document).ready(function(){
            resizeDiv();
        });

        window.onresize = function(event) {
            resizeDiv();
        };
    </script>

</body>

While <div class="mes"> has no height Jquery returns the window height, but if set a fixed height to <div class="mes"> Jquery returns the height of the document instead.

What's wrong here? How can I get the viewport height regardless of the other page elements?

See http://stackoverflow.com/questions/12103208/jquery-window-height-is-returning-the-document-height — Matthew Sant, Nov 24 '14 at 19:43
Matthew you were right, the missing doctype had an impact, now it's working. — naio, Nov 24 '14 at 20:02

Jquery window height calculation

0 Answers0