Grow your CSS skills. Land your dream job.

Setting a Div height to the window viewport size

  • # October 31, 2012 at 9:44 am

    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.

    # October 31, 2012 at 9:48 am

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

    # October 31, 2012 at 11:31 am

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

    # October 31, 2012 at 11:47 am

    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.

    # October 31, 2012 at 11:56 am

    With jQuery

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

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

    });**

    # October 31, 2012 at 12:09 pm

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

    # November 1, 2012 at 12:39 am

    Pure CSS:

    div {
    position:fixed !important;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    }
    # November 9, 2012 at 9:03 am

    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

    # November 13, 2012 at 11:51 am

    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.

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    This is a test page


    # November 13, 2012 at 12:12 pm

    Did the jQuery solution not work?

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

    # November 13, 2012 at 1:24 pm

    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.

    # November 13, 2012 at 2:32 pm

    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.

    # November 13, 2012 at 2:33 pm

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

    # November 13, 2012 at 2:36 pm

    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.

    # December 26, 2012 at 3:05 pm

    @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!

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".