Make div height decrease as user decrease screen

Asked

Viewed 5,157 times

0

I have a div and I want it to decrease when the user decreases the screen. I have something similar to the width, I did so: ($(window).width() -320) it takes the total width of the screen and decreases 320px. With the height I do not know how to do.

Someone’s already done it?

For example, I have the div fundo1 and when the user decreases the window, by the browser itself, the div decreases also.

jquery

  • Do you want to make a recursive layout right? Have you tried bootstrap ? Com makes it much easier to do these things with his classes.

  • Use a grids system such as 960.Gs or twitter bootstrap...

  • The site is already ready :) I was only asked to make this div decrease after I finished. I mean, I will not use Bootstrap. I’m looking for something in Jquery, only I’m missing the necessary knowledge now.

  • You can do with height relative, via CSS itself:

  • @Beets how? I was trying function resizeFundo1(){
 var telaAltura = $(window).height();
 $('.fundo1img').css({'height': telaAltura + 'px'});
} but it did not happen

  • If you set your div with relative height (height: 90%, for example), she will occupy 90% of the height set on her father.

  • @Beet but that’s not what I need. I need that div decrease as user moves screen size.

  • 1

    Behold this fiddle.

  • Thanks to @Beterraba

Show 4 more comments

1 answer

1


You can take a look at the event $.resize (http://api.jquery.com/resize/) jquery

Here’s an example I did for you to see how it works

Jquery

$(function(){
    $(window).resize(function(){
        var winW = $(window).width();
        var winH = $(window).height();
        var divResize = $(".divResize");

        if(winW < 500)
            divResize.css('width', winW);
        if(winH < 500)
            divResize.css('height', winH);
    });
});

HTML

<div class="divResize"></div>

CSS

body, html {
    height:100%;
    min-height:100%;
    padding:0;
}

.divResize {
    background:#000;
    width:100%;
    height:100%;
    max-width:500px;
    max-height:500px;
}

In this example when the useful area of the browser is less than 500px it will give a resize according to the screen size.

DEMO

Should this yours div be a background and occupy 100% (both width and height), there are some tips you may be using.

DEMO

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.