動態設置元素的高度並使用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' });
});