根据另一个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的大小

回答

相关问题