打開下拉菜單是100％窗口高度

Question

我有一個過濾應用程序，我正在做，它利用側邊欄的過濾選項。目前我擁有它，所以如果它們打開，它們會佔據一定的空間，但當它們打開時會喜歡它，未開啓的選項卡坐在窗口的底部。

所以，如果我打開第一個選項卡，將是這個樣子

__________ 
|__BRANDS__| 
| Brand 1 | 
| Brand 2 | 
|   | 
|   | 
|__________| 
|_FILTER 2_| 
|_FILTER 3_| 
|_FILTER 4_| 
|_FILTER 5_| 

（我希望圖有道理）

然後如果我開，說filter 2我想它是這樣的：

__________ 
|__BRANDS__| 
|_FILTER 2_| 
| EFFECT 1 | 
| EFFECT 2 | 
|   | 
|   | 
|__________| 
|_FILTER 2_| 
|_FILTER 3_| 
|_FILTER 4_| 
|_FILTER 5_| 

這樣，任何未使用的（低於使用的）被推到瀏覽器的底部。

現在，我有它設置如下：

HTML：

<div class="filter-sect"> 
    <div class="collapse"> 
     <p class="heading">Brands ({{countUniqueBrands()}})</p> 
     <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
    </div> 

    <div class="collapse"> 
     <p class="heading">Percolator</p> 
     <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
    </div> 

    <div class="collapse"> 
     <p class="heading">Color</p> 
     <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
    </div> 
</div> 

CSS：

.collapse{ 
    width:100%; 
} 

.container { 
margin:0; 
padding:0; 
width:500px; 
} 

.heading { 
margin:0px; 
color:#9c9c9d; 
padding:7px 28px; 
cursor:pointer; 
position: relative; 
font-size:17px; 
font-family:sans-serif; 
    font-weight:200; 
} 

.heading:hover{ 
    color:#FFF; 
    background:#a8a8a7; 
} 

.active-tab, .active:hover{ 
    background:#FFF; 
    color:#54ac51; 
    font-size:20px; 
    border-top:#dddddc 1px solid; 
    border-bottom:#dddddc 1px solid; 
    width:100%; 
} 

.content { 
padding:15px 10px 10px; 
    background:#e5e5e4; 
} 

JS：

$('.heading').click(function(){ 
    $(this).toggleClass('active-tab'); 
}); 


$(document).ready(function() { 
    $(".content").hide(); 

    $(".heading").click(function() 
         { 
    $(this).next(".content").slideToggle(450); 
    }); 

}); 

此外，對於那些誰在想動手，這裏是一個縮小js-fiddle和codepen我目前的工作英寸

---

我嘗試了一些東西，大多與包裝，在另一個div那麼高度設置到DIV打開divs，並告訴打開的div是height:100%或height:100vh。

沒有什麼真正的工作，搞清楚這一點，所以任何幫助你們可以給我指向我在正確的方向將不勝感激。

謝謝！

Answer 1

最難的是找到可用空間的高度值以展開菜單項。

的原因，這是這麼難的是，你的菜單是一樣高的瀏覽器窗口，瀏覽器尺寸在用戶和設備之間變化很大。我知道解決這個問題的唯一方法是使用一種昂貴的功能scroll和resize。

var closedTabHeight = 20, //This is a static number that works if all your tabs are of equal height in closed position 
    closedMenuHeight = closedTabHeight * $('.collapse').length, //height times amount of tabs 
    availableHeight= $(window).height - closedMenuHeight; 

$(window).on('scroll resize', function() { 
    availableHeight= $(window).height - closedMenuHeight; 
    setMenuHeight(); //this one explained below 
}); 

這會給您留下一個數字，您可以將其應用於打開的選項卡。但是，由於我們需要在點擊發生時以及窗口大小調整時更改打開標籤的高度，因此讓我們將所有這些都放在我們所稱的resize和AND click的函數中。

function setMenuHeight(){ 
    $('.active-tab').css('height', availableHeight); 
} 

$(".collapse").click(function(){ 
    setMenuHeight(); // makes sure the active tab gets the right height 

    var thisContent = $(this).find('.content'); 

    if($(thisContent).is(':visible')){ 
     $(thisContent).slideUp(450); //close the tab if its the one already open 

    }else{ 
     $('.content:visible').slideUp(450); 
     $(thisContent).slideDown(450); 
    } 
});