Div-Element Höhe 100% mit vertikaler Bildlaufleiste

Question

Ich bin stecken, versuchen, dies herauszufinden. Im Prinzip habe ich ein div viele einzelne divs enthalten (siehe Bild)

aber ich kann die vertikale Bildlaufleiste erhalten richtig zu arbeiten, wenn ich Höhe: 100%;

Beispiel:

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

Verwendung Höhe: 100% in der aktiven div-panel-Behälter muß nicht das Scroll-Ereignis zu arbeiten, und führen scheinen. Aber wenn ich eine tatsächliche Höhe gesetzt wie 700px im aktiven Panel-Container, die Scroll-Ereignis funktioniert und die Bildlaufleiste aktiv ist:

Ich habe das erste div mit der relativen Position, weil ich auch eine andere haben div zusammen mit dem Panel, um den Status anzuzeigen.

Hat jemand irgendwelche Vorschläge? Ich versuche das schon seit einiger Zeit herauszufinden.

Answer 1

Sie müssen auch height:100% zum übergeordneten div von #active-panel-container geben.

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