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

Question

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.

I thought that not all browser would behave in the same way.. Some of them have different behaviors when applying 100% height. Honestly this is something I learnt from an article some years ago... In Chrome it is ok, 100% height works, but what about the other browsers? — Andry, Jan 02 '13 at 09:40
Well years ago is most likely totally out of date for something like this. I've never really experienced any problems due to 100% height and width of elements in modern browsers. It's a pretty fundamental part of presentation and they all seem to have it down. IE might differ, but that's to be expected no matter what you do. — Kyle, Jan 02 '13 at 09:41
When I look at it with the Chrome Code Inspector I see that somewhere about your closing script tag there is a "zero width space", which affects in a break right after "root". For more information: [link](http://stackoverflow.com/questions/2973698/whats-html-character-code-8203) — lukasgeiter, Jan 02 '13 at 09:43

Giona · Answer 1 · 2013-01-02T17:35:36.697

2

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; }

edited Jan 02 '13 at 17:35

answered Jan 02 '13 at 10:28

Giona

20,734
4
56
68

@Mr_Green what i'm saying is that javascript-recovered height isn't "more compatible" than pure css. That's the jQuery 1.6 function: `var docElemProp = elem.document.documentElement[ "client" + name ]; return elem.document.compatMode === "CSS1Compat" && docElemProp || elem.document.body[ "client" + name ] || docElemProp;` and thats the new one: `return elem.document.documentElement[ "client" + name ];` – Giona Jan 02 '13 at 10:42
I misunderstood by seeing `1.8+` :) – Mr_Green Jan 02 '13 at 10:46
:) i meant "jQuery(window).height() == document.documentElement.clientHeight in jQuery 1.8+" @Mr_Green , because before 1.8 `$(window).height()` returned a different equation, better in my opinion. – Giona Jan 02 '13 at 10:48
OK, my question now is... is it possible to retrieve the correct window height using javascript in order to resize a div? I really cannot believe that there is no way to retrieve height in a browser... it sounds so impossible to me... btw thanks for your post, really useful! – Andry Jan 02 '13 at 10:52
2

i did some testing @Andry , with window.innerHeight you get the "right" height in any browser EXCEPT Webkit based (Chrome, Safari, Android etc) and IE<9 ... So no, there's no direct way in javascript. That's what i came out with, but it involves user agent sniffing (booo) : `var height = (RegExp(" AppleWebKit/").test(navigator.userAgent)) ? document.documentElement.clientHeight : ( window.innerHeight || document.body.clientHeight );` – Giona Jan 02 '13 at 10:53
P.S. it fails anyway on IE<9, because `document.body.clientHeight` is shorter then the user's window IF the body element is shorter than full height (ie: no vertical scrollbars). Trust me, you need css @Andry ;-) – Giona Jan 02 '13 at 11:00

Jai · Answer 2 · 2013-01-02T10:32:29.720

1

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/

edited Jan 02 '13 at 10:32

answered Jan 02 '13 at 09:42

Jai

74,255
12
74
103

Jai thanks but I am not looking for a trick... The point is that inside that div I need to put some stuff, and in particular there is a div located in the bottom which must always be in the lower part of the browser window... See my edit please and apply your change... look at what happens to div 'graph'. – Andry Jan 02 '13 at 09:54
thats weired! You can checkout the updated answer and the fiddle. – Jai Jan 02 '13 at 10:33

Mr_Green · Answer 3 · 2013-01-02T11:06:32.217

1

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

Check here for Browser Compatibility of height css property.

Working Fiddle

edited Jan 02 '13 at 11:06

answered Jan 02 '13 at 09:49

Mr_Green

40,727
45
159
271

Mr_Green sorry it does not work... As you reduce the height, you see vertical scroll appear... the div size will not fit... Sorry but thanks a lot for your concern :( – Andry Jan 02 '13 at 09:57
@Andry Ya I understand it now.. sorry I misunderstood your explanation.. I will try it :) – Mr_Green Jan 02 '13 at 09:58
I had a feeling :( btw thanks for the browser compatibility page... I wanted good data but all only found blogs... not really reliable... I did not know that mozilla foundation had published compatibility info for CSS specifications... thanks – Andry Jan 02 '13 at 10:30

score 0 · Answer 4 · answered Jan 02 '13 at 10:13

As I already wrote in the comments I just see one problem. The zero width space (). 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.

Thankyou for your concern. I applied your code just cut and pasted it... The point is that nothing changes... I mean I have the same problem with div resize not fitting vertical size. Does your code in your browser work? I mean, this white space character affects vertical resize? — Andry, Jan 02 '13 at 10:17
Yes in my browser the code does perfectly work. What browser do you use? And could you maybe upload a screenshot of your problem? — lukasgeiter, Jan 02 '13 at 10:19
I use Chrome 23 on MacOS. OK, gonna publish a screenshot, did not think about this sorry... — Andry, Jan 02 '13 at 10:30

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

Demo

PS

4 Answers4