jQuery - 根据屏幕宽度添加像素到高度

Question

I need to do this with jQuery.

Let's say that I have simple div element in HTML like that:

<div class="grow"></div>

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

.grow {
height:20px; 
width:100%;
}

I need to write script where DIV grow will be growing according to the screen resolution. Starting from 90px's.

Sth like this:

For 90px screen wide DIV height will be - 20px For 130px screen wide DIV height will be - 30px

so for any 4px's width height will grow 1px.

I tried lots of solutions but without any luck. Any help will be appreciated.

Answer 1

Try this

$(window).resize(function() {
    var bodyheight = $(document).height();
    var divHeight = (bodyheight-10)/2;
    $('.grow').css("height", divHeight+"px");;
});

Answer 2

here you go [http://jsfiddle.net/6KfHy/1/]

var baseWidth = 90;
var stepWidth = 4;
var baseHeight = 20;
var growHeightPerStep = 1;

function changeHeight() {
    var windowW = $(window).width();
    var diffWidth = windowW - baseWidth;
    var diffHeight = parseInt(diffWidth / 4, 10);

    $('.grow').css('height', baseHeight + diffHeight + 'px');
}

changeHeight();

$(window).resize(function() {
    changeHeight();
});

Answer 3

Try this

var width = (+$(window).width());
var divHeight = (width-10)/2;
$(".grow").height(divHeight);

Answer 4

var $grow = $('.grow'),
    $window = $(window);
$(window)
    .resize(function () {
        var windowWidth = $window.width();
        if (windowWidth > 90) {
            $grow.height(~~ (windowWidth / 4));
        }
    })
    .resize();

Trigger it the first time on dom ready.

http://jsfiddle.net/techunter/Xug5A/

remark careful with .grow margins and paddings :)