根據另一個div的高度調整div的大小

我目前正在進行類似的工作，發佈時間爲here。但由於某種原因，我無法讓它在視窗/瀏覽器窗口調整大小時起作用。不太確定是否有我的CSS或其他東西。根據另一個div的高度調整div的大小

下面是我使用的代碼：

$(document).ready(function() { 

$('.more').hide(); 

$('.link').click(function() { 
    $(this).next('.more').slideToggle(); 
}).toggle(function() { 
    $(this).children("span").text("[-]"); 
}, function() { 
    $(this).children("span").text("[+]"); 
    return false; 
}); 
var maxHeight = 0; 
$('div.simultaneously').each(function(index) { 
    if ($(this).height() > maxHeight) { 
     maxHeight = $(this).height(); 
    } 
}); 
$('div.simultaneously').height(maxHeight); 
});

我試圖讓左邊的列（LFT-COL）相匹配的隱藏div的高度時，它滑下。總體而言，如果視口大小已調整，我希望左欄div具有瀏覽器的整個高度。如果隱藏的div滑落，如果有任何滾動，我希望左列div與右列div的高度相匹配。

這裏是我的小提琴：http://jsfiddle.net/sLVsR/5/

如果任何人有不同的方式來處理這一點，我完全贊成它。

來源

2013-01-02 ultraloveninja

我如果你想在瀏覽器/視口更改時調整div的大小，請使用[.resize（）]（http://api.jquery.com/resize/） – kei

我正在使用類似的帖子，但我我不確定toggleSlide是否會導致它不能以相同的方式運行，或者是否有其他方法來完成我正在嘗試執行的操作。 – ultraloveninja

@kei - 所以使用.resize而不是.height？ – ultraloveninja

已經重讀你的問題，我做了一些更改您的代碼

jQuery的

$(document).ready(function() { 

    $("div.lft-col").height($(window).height()-20); //I've put in -20 just so you can see the div shadow 

    $('.more').hide(); 

    $('.link') 
     .click(function() { 
      $more = $(this).next('.more'); 
      $more.slideToggle('slow', function() { 
       if ($more.is(":visible")) 
        $("div.lft-col").height($(document).height()-20); 
       else 
        $("div.lft-col").height($(window).height()-20); 
      }); 
     }) 
     .toggle(function() { 
      $(this).children("span").text("[-]"); 
     }, function() { 
      $(this).children("span").text("[+]"); 
      return false; 
     }); 

    $(window).resize(function(){ 
     $("div.lft-col").height($(document).height()-20); 
    }); 

});

CSS

#container { 
    /*height: 100%;*/  
}

DEMO

來源

2013-01-02 18:12:26 kei

Ahhhhhh，我明白了。好。這就說得通了。是的，我不知道我是否還需要那個容器ID。我現在看到它正在尋找文檔，然後檢查窗口元素，如果其他div不可見。但我肯定會玩這個。對此，我真的非常感激。 – ultraloveninja

根據另一個div的高度調整div的大小

回答

相關問題