Make div height decrease as user decreases screen

Question

Make div height decrease as user decreases screen

Navigation

#1 by (1 votes)

0

I have a div and I want it to decrease when the user zooms out. I have something similar to the width, which I did like this:% w / o% it takes the full width of the screen and decreases 320px. With the height I do not know how to do it.

Has anyone done this yet?

For example, I have the div ($(window).width() -320) and when the user decreases the window, by the browser itself, the div decreases too.

jquery

asked by anonymous 02.07.2014 / 19:53

1 answer

Android GridView Layout Doubt on MYSQL + Delphi Code

score 1 · Accepted Answer

You can take a look at the $.resize ( link ) event of Jquery

Here's an example I made you 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 browser's useful area is less than 500px it will resize according to the size of the screen.

DEMO

If your div is a background and occupies 100% (both width and height), there are some tips you might be using.

DEMO