CODEWITHSUNDEEP
htmlcss
adviner
adviner

Reputation: 3557

Div element height 100% with vertical scrollbar

I'm stuck trying to figure this out. Basically I have a div containing lots of individual divs (see image)

enter image description here

but I can get the vertical scroll bar to work properly when I use height: 100%;

Example:

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

using height: 100% in the div active-panel-container doesnt seem to work and execute the scroll event. But if I put an actual height like 700px in active-panel-container, the scroll event works and the scroll bar is active:

enter image description here

I have the first div with the relative position because I also have another div along with the panel to show status.

Does anyone have any suggestions? I've been trying to figure this out for some time now.

Upvotes: 1

Views: 2323

Answers (1)

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

You need to give height:100% to parent div of #active-panel-container too.

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

Upvotes: 2

Related Questions