Div元素高度100％，垂直滚动条

Question

我一直试图解决这个问题。基本上我有一个包含大量个别div的div（见图）

但是当我使用高度时，我可以使垂直滚动条正常工作：100％;

示例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

使用高度：div中的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>