Question

我正在开发一个项目，我需要动态设置高度，意味着当页面加载高度时必须设置为自身并且它是一个响应框，所以当浏览器窗口调整大小时，高度增加但是我我无法解决它。我分享了下面的脚本。它不是用窗口高度来计算的，否则它应该根据窗口大小调整来设置和改变高度。有什么帮助吗？

override func touchesBegan(touches: Set<NSObject>, withEvent event: UIEvent) {
        var touch = touches.first as! UITouch
        var point = touch.locationInView(self.view)

        if point.x < size.width / 2 // Detect Left Side Screen Press
        {
            makeHeroSlide()
        }
        else
        if point.x > size.width / 2 // Detect Right Side Screen Press
        {
            makeHeroJump()
        }
    }

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

请看jsfiddle： https://jsfiddle.net/rj1xy1ue/

Answer 1

我建议您使用%代替px。 px将修复该值，但％将根据可用视口自动计算值。

var itemHeight = 20; //Sample value
$('.item').each(function () {
    $(this).css({
        height: itemHeight + '%'
    });
});

简单地说，找到适合您情况的itemHeight的完美价值，然后分配它。无需额外的resize事件处理程序。

在您当前的代码中，在resize事件中，您再次分配相同的值，这对维度没有任何影响。因此，您无法看到调整大小的差异。

试试这个：

var itemHeight = $('.item').height();

function resizer() {
    $('.item').each(function () {
        $(this).css({
            height: itemHeight + 'px'
        });
    });
}
$(window).on('resize', function (event) {
    itemHeight = 350 //any different value
    resizer();
});

示例演示：http://jsfiddle.net/lotusgodkk/GCu2D/822/

注意：确保在调整大小处理程序中更改itemHeight的值

Answer 2

您所描述的内容称为响应式设计。

响应式设计的一个关键想法是使用百分比代替px。

请参阅以下参考资料：

WebDesignerWall on Responsive Design

CSS-Tricks question

了解一些想法。

请注意，使用高度百分比并不像宽度那么重要。您可能还想查看

Responsive Layouts with flexbox

在jQuery方面，您可以使用以下内容：

var win = $(window);

$(function() {

    win_size_recalc();

    $(window).on('resize', function(){
        win_size_recalc();
    });

}); //end document.ready

function win_size_recalc(){
    ww = win.width();

    //EXAMPLE OF USE:
    if (ww <= 550){
        $('#header').css({'height':'50px'});
        $('nav').css({'height':'55px'});
        $('#headerstuff').css({'width':'98%'});
    }else if (ww <= 650){
        $('#headerstuff').css({'width':'98%'});
        $('nav').css({'width':'98%'});
    }else if (ww <= 770){
        $('#headerstuff').css({'width':'90%'});
        $('nav').css({'width':'90%'});
    }else if (ww <= 850){
        $('#headerstuff').css({'width':'90%'});
        $('nav').css({'width':'90%'});
    }else if (ww <= 900){
        //etc etc
}

您可能还想查看CSS媒体查询，这是使用jQuery执行上述操作的CSS方式：

https://css-tricks.com/css-media-queries/

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

and more

Answer 3

正如其他人所说，主要问题是你只计算itemHeight一次。这个小提示显示了一种更现代的方式来使用jQuery来实现您的目标（使用on代替bind）：

http://jsfiddle.net/sean9999/7j4sz3wv/6/

$(function(){
    "use strict";
    var resizeBoxes = function(){
        var padding = 25;
        var parentHeight = $('body').height() - padding;
        $('#debug').html( 'parent height = ' + parentHeight );
        $('.item').css('height',parentHeight);
    };
    $(window).on('resize',resizeBoxes);
    resizeBoxes();
});

body {
    position: absolute;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #FED;
}
#debug {
    width: 50%;    
    float: right;
    height: 100%;
    margin-top: 25%;
    font-weight: bold;
    color: navy;
}
.item {
    min-width: 25px;
    border: 2px solid blue;
    background-color: silver;
    min-height: 100px;
    float: left;
    margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

<div id="debug"></div>

Answer 4

我不确定我是否能够正确理解您的问题，但我会根据我能理解的内容进行尝试。

您希望.item个对象在resize对象window事件上调整大小，以便您希望从这些.height()个.item个对象开始，然后按比例缩放到window上的resize高度。

如果这是您想要的，那么解决方案非常简单。您计算.height() window对象的差异，并将该差异添加（或删除）到.height()个.item个对象的默认{。}}。

查看 this jsFiddle 并调整结果面板的高度以观察.item个对象的高度差异。并告诉我这是否是您期望的结果。

示例中使用的JavaScript如下：

var items = $('.item');
var windowObject = $(window);
var defaultWinHeight = windowObject.height();
var defaultItemHeight = items.height();
items.css({ height: defaultItemHeight + 'px' });
windowObject.on('resize', function (event) {
    var currWinHeight = windowObject.height();
    var difference = currWinHeight - defaultWinHeight;
    var itemHeight = defaultItemHeight + difference;
    items.css({ height: itemHeight + 'px' });
});

如果这不是您想要的，请道歉。希望它在某种程度上有所帮助。

更新＃1：

这是同一个实验的另一个 resulting jsFiddle ，但涉及计算百分比。

JavaScript的：

var items = $('.item');
var windowObject = $(window);
var defaultWinHeight = windowObject.height();
var defaultItemHeight = items.height();
items.css({ height: defaultItemHeight + 'px' });
windowObject.on('resize', function (event) {
    var currWinHeight = windowObject.height();
    var currWinPercent = (currWinHeight/defaultWinHeight)*100;
    var itemHeight = (currWinPercent/100)*defaultItemHeight;
    items.css({ height: itemHeight + 'px' });
});

使用jQuery动态设置高度为元素并在窗口大小上更改高度

4 个答案: