1

I am using this code to achieve a div with browser (window) height 

$(document).ready(function(){

    $('#div') .css({'height': (($(window).height()))+'px'});

});

But what if I want the div constraint its height to user maximum window height(max to their device limit)? As the above code only determine the current window height, once user resizing window or not opening it with max window size, it got change and failed.

CwKin7
  • 21
  • 2
  • What about using CSS media queries? Looks like what you are looking for – A. Wolff Mar 06 '14 at 15:38
  • possible duplicate of [Make div 100% height of browser window](http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window) – rpax Mar 06 '14 at 15:39

2 Answers2

3

Try this : 

$(document).ready(function(){
    $(window).resize(function(){
        $('#div') .css({'height': (($(window).height()))+'px'});
    }).trigger('resize')
});

With that, you are binding an event when the screen resize. It will recalculate the window height.

the .trigger() part is to ensure that it happen once when the DOM is ready (it trigger the event resize).

Karl-André Gagnon
  • 33,662
  • 5
  • 50
  • 75
  • But the point is not resizing, it needed to constraint with user max window(screen) height. Even user resize the broswer, the div height stay that value. – CwKin7 Mar 06 '14 at 16:07
  • Well, Adeneo is close of what you want, but it is *impossible* to do what you want since you cant get the size of scrollbars, toolbars and everything between screensize and window size. – Karl-André Gagnon Mar 06 '14 at 16:16
0

...div constraint its height to user maximum window height(max to their device limit)

once user resizing window or not opening it with max window size, it got change and failed.

Sounds like you're looking for

screen.height

which would give you the height of the screen, not the window.

Community
  • 1
  • 1
adeneo
  • 312,895
  • 29
  • 395
  • 388
  • @A.Wolff to be honnest, after seing my answer and his answer, i'm not sure what the OP want.... I am not the downvoter tough – Karl-André Gagnon Mar 06 '14 at 15:40
  • @Karl-AndréGagnon i understand question as adeneo, that's why i ask... ;) – A. Wolff Mar 06 '14 at 15:41
  • @adeneo Can we merge our answer in the case OP want both? I'll delete mine. – Karl-André Gagnon Mar 06 '14 at 15:42
  • 2
    Ok, maybe because it is the property height of screen: `screen.height` :) – A. Wolff Mar 06 '14 at 15:43
  • height is property of screen, not a method; so it should be `screen.height`(I wasn't the downvoter by the way!) However, I'm not sure this best answers the question - it is better to hook the window up to the resize event listener. – athms Mar 06 '14 at 15:44
  • @athms - That depends on what you want, this is completely different from resizing an element when the window is resized – adeneo Mar 06 '14 at 15:45
  • The way I understood it, the point was to make an element the same size as the screen, as that's usually what "maximum window height / size" is. – adeneo Mar 06 '14 at 15:46
  • @Karl-AndréGagnon - Didn't see that comment, you should probably keep your answer, as you seem to be getting the upvotes, so it's probably the correct one. – adeneo Mar 06 '14 at 15:50
  • screen height includes your windows elements and toolbars and so isn't very helpful when it comes to working with a web page residing inside the browser window. Also, what if the browser is moved onto another screen? – athms Mar 06 '14 at 15:51
  • 1
    @athms - It wasn't really a debate about what method works best with a website, it was an attempt to answer the OP's question, and that question is somewhat poorly formulated, but if in fact the OP is looking for the screen height, a resize event probably isn't "better" as they are two completely different things. – adeneo Mar 06 '14 at 15:55
  • Spent some time reading through, sorry for not stating it clear enought. The on resize listener seems not related, as the div height would only get a stable value depends on max broswer height even window change. – CwKin7 Mar 06 '14 at 16:31