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

Question

我需要用 jQuery 来做这件事。

假设我在 HTML 中有这样的简单 div 元素：

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

CSS：

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

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

我需要编写脚本，其中 DIVgrow将根据屏幕分辨率增长。从 90px 开始。

像这样：

对于90px屏幕宽的 DIV 高度将是 - 20px 对于130px屏幕宽的 DIV 高度将是 - 30px

所以对于任何 4px 的宽度高度都会增长 1px。

我尝试了很多解决方案，但没有任何运气。任何帮助将不胜感激。

Answer 1

尝试这个

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

Answer 2

给你 [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

尝试这个

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();

在 dom 就绪时第一次触发它。

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

注意.grow边距和填充:)