CODEWITHSUNDEEP
jqueryhtmlcssresize
Andry
Andry

Reputation: 16845

Why div resize will not fit browser window when reducing vertical size?

Consider the following simple html page:

<doctype>
<html>
    <head>
        <title>This is my page</title>
        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    </head>

    <body style="padding:0px;margin:0px">
        <div id="root" style="background-color:#dddddd;width:100px;height:100px;position:relative">
            <div id="graph" style="background-color:#00ff00;width:200px;height:200px;position:absolute;bottom:0px">
                This is the DW box
            </div>
        </div>

        <script type="text/javascript">
            $(window).resize(function(){
                $('#root').width($(window).width());
                $('#root').height($(window).height());
            });
        </script>
    </body>
</html>

As you can see by using jQuery I resize div root in order to fit the window. If you try the code (at least on Chrome, my version is Chrome 23) what happens is that root will constantly fit the browser window horizontally. Vertically fitting is also performed correctly but only when incrementing browser's window height.

If you try to expand your browser window vertically, no problem. But, after expanding, if you try to reduce the vertical seize of your browser window, root will not fit it!

Demo

You can see my window here.

enter image description here

Here I expand, nothing wrong, the grey box (root) expands.

enter image description here

Unfortunately the snapshot tool does not show the scrollbar but it is evident that when reducing the vertical size, the grey box does not fit...

enter image description here

Why is this? How to fix this? Thankyou

PS

You see a div named graph. That div is supposed to stay in the lower part of the browser window.

Upvotes: 0

Views: 5351

Answers (4)

Giona
Giona

Reputation: 21114

The point here is that jQuery(window).height() == document.documentElement.clientHeight (as for jQuery 1.8+), which behaves differently in different browsers.

$(document).height() returns the highest between scrollHeight, offsetHeight and clientHeight - yet a very different result between browsers.

So it's actually less cross-browser than using CSS. That's what you should do:

html,body { height:100%; }
#root { min-height:100%; position:relative; }
#graph { position:absolute; bottom:0; }

Upvotes: 2

Mr_Green
Mr_Green

Reputation: 41832

It seems it is possible using only CSS i.e. height: 100%

Check here for Browser Compatibility of height css property.

Working Fiddle

Upvotes: 1

Jai
Jai

Reputation: 74738

To make it cross browser for this you have to use css for html and body too.

in my fiddle i made a change in the css:

html,body{height:100%;}

then the little change in the jquery:

$(window).resize(function() {
    $('#root').width('100%'); // <---100% width
    $('#root').height('100%'); //<---100% height
});

and this way you can't get the glitch in expanding or shrinking the window.

checkout the updated fiddle: http://jsfiddle.net/D6YUr/2/

Upvotes: 1

lukasgeiter
lukasgeiter

Reputation: 152860

As I already wrote in the comments I just see one problem. The zero width space (&#8203;). Thats a invisible Unicode character, which is used to mark where a word can be separated (at the end of the line). How it get in your code I really dont know. So I just retyped your code (The only solution I know to remove it) Here is the result:

<doctype>
<html>
    <head>
        <title>This is my page</title>
        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    </head>

    <body style="padding:0px;margin:0px">
        <div id="root" style="background-color:#dddddd;width:100px;height:100px;position:relative">
            <div id="graph" style="background-color:#00ff00;width:50px;height:20px;position:absolute;bottom:0px">
            </div>
        </div>

        <script type="text/javascript">
            $(window).resize(function(){
                $('#root').width($(window).width());
                $('#root').height($(window).height());
            });
        </script>
    </body>
</html>

It looks exactly the same but the zero width space is removed.

Upvotes: 0

Related Questions