Skip to main content

Forums

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #40541

    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.

    #113023
    Paulie_D
    Moderator

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

    #113037
    Senff
    Participant

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

    #113039
    Paulie_D
    Moderator

    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.

    #113040
    mmoustafa
    Member

    With jQuery

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

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

    });**

    #113041
    JoniGiuro
    Participant

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

    #113078
    Taufik Nurrohman
    Participant

    Pure CSS:

    div {
    position:fixed !important;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    }
    #113814

    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

    #114206

    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">



    Untitled Document

    This is a test page


    #114211
    Paulie_D
    Moderator

    Did the jQuery solution not work?

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

    #114218

    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.

    #114221
    Paulie_D
    Moderator

    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.

    #114222

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

    #114223
    Paulie_D
    Moderator

    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.

    #119063
    wpg4665
    Member

    @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 20 total)
  • You must be logged in to reply to this topic.
icon-link icon-logo-star icon-search icon-star