动态设置元素的高度并使用jQuery更改窗口调整大小的高度

Question

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

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

var itemHeight = $('.item').height();
$('.item').each(function() {
  $(this).css({
    height: itemHeight + 'px'
  });
});

$(window).on('resize', function(event) {

  $('.item').each(function() {
    $(this).css({
      height: itemHeight + 'px'
    });
  });
});

请参阅jsfiddle： https ://jsfiddle.net/rj1xy1ue/

Answer 1

我建议您使用%而不是px 。 px将固定该值，但％将根据可用视口自动计算这些值。

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

只需找到最适合您的情况的itemHeight的理想值，然后进行分配即可。 无需额外的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关于响应式设计

CSS技巧问题

一些想法。

请注意，对高度使用百分比不如对宽度使用重要。 您可能还想签出

使用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/

和更多

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对象在window对象的resize事件中调整resize ，以便从这些.item对象具有的.height()开始，然后与resize上的window高度成比例地resize 。

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

看看这个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：

这是同一实验的另一个结果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' });
});