Question

我需要用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。

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

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边距和填充：）

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

4 个答案: