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

【问题标题】：jQuery - add pixels to height according to screen widthjQuery - 根据屏幕宽度将像素添加到高度
【发布时间】：2013-11-05 19:04:05
【问题描述】：

我需要用 jQuery 来做到这一点。

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

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

CSS：

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

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

我需要编写 DIV grow 将根据屏幕分辨率增长的脚本。从 90px 开始。

这样的：

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

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

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

【问题讨论】：

你肯定想要它的屏幕分辨率，而不是响应浏览器窗口的大小？
如果它会在每个 4px 宽度 1px 高度的任何时候增长，它就会起作用，所以我认为这对我来说已经足够了，但很高兴我会听到你的想法 :)
90/4 = 22（四舍五入）不是 20，所以我不明白
宽度低于 90px 不要打扰我。我只需要它从 90 px 的宽度开始工作到无穷大

标签： javascript jquery html css

【解决方案1】：

给你 [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();
});

【讨论】：

【解决方案2】：

试试这个

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

【讨论】：

【解决方案3】：

试试这个

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

【讨论】：

【解决方案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 边距和填充:)

【讨论】：