文章/答案/技术大牛

发布

社区首页 >问答首页 >具有垂直滚动条的Div元素高度100%

问具有垂直滚动条的Div元素高度100%
EN

Stack Overflow用户

提问于 2016-11-10 05:18:10

回答 1查看 2K关注 0票数 1

我被困住了想办法解决这个问题。基本上，我有一个包含大量单个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 is )，滚动事件可以工作，而滚动条是活动的：

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

有人有什么建议吗？我已经想了一段时间了。

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-11-10 05:22:19

您也需要将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>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40520420

复制

相似问题

问具有垂直滚动条的Div元素高度100%
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有垂直滚动条的Div元素高度100%EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有垂直滚动条的Div元素高度100%
EN