带垂直滚动条的 100% div 元素高度

Question

我一直在努力解决这个问题。基本上我有一个包含许多单独 div 的 div（见图）

但是当我使用 height: 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 活动面板容器中使用 height: 100% 似乎不起作用并执行滚动事件。但是如果我在活动面板容器中放置一个像 700px 这样的实际高度，滚动事件就会起作用并且滚动条处于活动状态：

我有第一个具有相对位置的 div，因为我还有另一个 div 以及面板来显示状态。

有人有什么建议吗？一段时间以来，我一直在努力解决这个问题。

Answer 1

您还需要将height:100% 提供给#active-panel-container 的父div。

$('#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>