Setting a Div height to the window viewport size

[GoldenRatio1618]

I have a Div that has a height set in my CSS at 600px. I want to control that height dynamically so that it changes based on the viewport size when a user resizes his browser. I assume this can be done using jquery/JS but can not figure out how. Any help is appreciated.

[Paulie_D]

Is it the main content div of the site because it sounds like you need the 100% div markup.

[Senff]

I’m not sure if this is the proper way of doing it, but I always end up using this jQuery script:

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

window.onresize = function(event) {
resizeDiv();
}

function resizeDiv() {
vpw = $(window).width();
vph = $(window).height();
$(‘#somediv’).css({‘height’: vph + ‘px’});
}

[Paulie_D]

I don’t see the point in having a ‘div’ the same height as the viewport as it will immediately push any footer/header off the page.

I can see having a sticky footer type of affair to that the ‘main content’ will always be the ‘right’ height but otherwise….nope, I don’t see it.

[mmoustafa]

With jQuery

**$(window).resize(function() {

$(‘#my-div’).css(‘height’, window.innerHeight+’px’);

});**

[JoniGiuro]

you don’t need to add ” +’px’ ” with jquery. default is pixels

[Taufik Nurrohman]

Pure CSS:

div {

position:fixed !important;

position:absolute;

top:0;

right:0;

bottom:0;

left:0;

}

[GoldenRatio1618]

It is for this project. http://www.plusen.com/projects/slider.php?projectID=useralbum:113587842881438128205/Project6BluestemPond

You will see how the slideshow has a defined height when what I really want is for it to adjust to the viewport size and fill the frame. The div the slideshow sits in is set at 600px in the CSS and I want it to be set dynamically based on the viewport size

[GoldenRatio1618]

Does anyone have any other ideas because I tried all of these options and they did not work. Here is a sample page. I want the #test div to span 100% of the height and adjust as the window size changes.

This is a test page

[Paulie_D]

Did the jQuery solution not work?

Frankly, I’m not seeing what it is you are trying to do. What you have is fine.

[GoldenRatio1618]

it did not work, and what I have is not fine because it has a static height. I want it to adjust based on viewport size to span 100% of the height.

[Paulie_D]

So you want the image to scale up heightwise…what about the width? What should that do, break out of the page?

Basically from what I can see, what you are after is not possible.

[GoldenRatio1618]

the width would scale to the proper aspect ratio for the image

[Paulie_D]

So you have a couple of full width images there…should they grow taller too?

It seems you want it both ways and you can’t do that…AFAIK.

[wpg4665]

@Hompimpa Thank you so much for your CSS solution, worked perfectly for me! Perhaps a bit different than what GoldenRatio was looking for, but great for me…thanks!

[Author]

Posts