div元素的高度與垂直滾動條的100％

Question

我卡住試圖弄清楚這一點。基本上我有一個包含很多個人的div一個div（見圖片）

，但我可以當我使用高度垂直滾動條才能正常工作：100％;

實施例：

$('#active-panel-container').on('scroll', function(e) { 
 
    alert('scrolling'); 
 
});

body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div style="position:relative;"> 
 
    <div id="active-panel-container" style="height:100%;overflow-y:scroll; margin: 0 auto;"> 
 
    panel divs go in here 
 
    </div> 
 
</div>

使用高度：在div活性面板容器似乎不工作，並執行該滾動事件100％。但是，如果我主動與面板容器放在一個實際的高度像700像素，滾動事件的工作原理和滾動條是活動：

我有一個相對位置的第一個div，因爲我也有另一種div與面板一起顯示狀態。

有沒有人有任何建議？我一直試圖弄清楚一段時間。

Answer 1

您也需要給height:100%父母分區#active-panel-container。

$('#active-panel-container').on('scroll', function(e) { 
 
    console.log('scrolling'); 
 
});

body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div style="position:relative;height:100%;"> 
 
    <div id="active-panel-container" style="height:100%;overflow-y:scroll; margin: 0 auto;"> 
 
    panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here 
 
    </div> 
 
</div>