Div with fixed height at 100%

Question

So I am trying to get a div to cover 100% height of the window which is simple but then I do not want it to resize when the browser is resized. I cannot used a fixed height such as - height: 900px as it will differ between browser and device being used. I have tried to use the following jquery:

$(document).ready(function() {
    var screenHeight = $(window).height();
    $('#home').css('height', screenHeight + 'px');
});

This works to a certain degree but the problem is, if the site is visited while the browser is not in full screen it will set it to that height and then won't get bigger, I need it to set to the height of the browser IF the browser was maximized, is that possible?

You can see what I have so far at: http://zimxtrial.ukbigbuy.com/ - try refreshing the page with different browser heights and then resizing to see what I mean.

May I ask why you need the DIV at screen height once and for all? Seems like a weird thing to me — casraf, Apr 17 '14 at 11:37
@ChenAsraf If you look at the page here - http://zimxtrial.ukbigbuy.com/ you will see that I am using one page for everything I need, instead of going from page to page you just get sent up and down to sections, I need the first section set to 100% height because if you resize the browser height, the image in the first section becomes too small for the layout I am doing, I need the image height to stay at 100% along with text I will be adding on top of it. — TristanD27, Apr 17 '14 at 13:27

Pete · Accepted Answer · 2014-04-17T11:39:44.920

1

You could use screen.height or screen.availHeight (gets the screen resolution rather than the browser viewport):

Example

edited Apr 17 '14 at 11:39

answered Apr 17 '14 at 11:33

Pete

57,112
28
117
166

3

This is the best answer. All the others ignore the fact OP doesn't want the screen to resize along with the window, only initially – casraf Apr 17 '14 at 11:34
@ChenAsraf ` if the site is visited while the browser is not in full screen it will set it to that height and then won't get bigger` whats the meaning of this line – Sridhar R Apr 17 '14 at 11:34
1

Note that `screen` references only the primary screen and not neccessarely the current screen when using multiple screens, and there are some issues, browser chrome etc. and that's why it's almost never used – adeneo Apr 17 '14 at 11:35
1

@SridharR means using `$(window).resize(...)` will resize the window later on and OP wants it to have one initial size and that's it – casraf Apr 17 '14 at 11:36
@ChenAsraf if user maximize the browser how div height will change – Sridhar R Apr 17 '14 at 11:39
@SridharR and that's the exact problem with this question – casraf Apr 17 '14 at 11:41
This seems to be the best answer so far, as Chen pointed out, the other answers allow the height to changed, I need it set to the max height available by the browser and not change. The only concern I have with this answer is that adeneo has pointed out that `screen` has a few issues, is there a way of achieving the same result that will work on any browser without problems? – TristanD27 Apr 17 '14 at 12:52
1

[see this post, it should work with all major browsers](http://stackoverflow.com/questions/2242086/how-to-detect-the-screen-resolution-with-javascript). Or [you can test it here](http://www.javascriptkit.com/howto/newtech3.shtml) – Pete Apr 17 '14 at 13:03

score 0 · Answer 2 · answered Apr 17 '14 at 11:29

use $(window).resize it will update the selector whenever browser height changes

Try this

<script type='text/javascript'>

$(function(){
    var iniHeight = $(window).height();
    $('#home').css('height', iniHeight + 'px');
    $(window).resize(function(){
    var newHeight = $(window).height();
    $('#home').css('height', newHeight + 'px');
    });
});
</script>

score 0 · Answer 3 · answered Apr 17 '14 at 11:30

Try to use resize() like,

$(document).ready(function() {
    var screenHeight = $(window).height();
    $('#home').css('height', screenHeight + 'px');
    $(window).resize(function(){ // change home height on window resize event
       $('#home').css('height', $(this).height()+ 'px');
    });
});

Div with fixed height at 100%

3 Answers3