Div要素の高さ垂直スクロールバーで100％

Question

私はこれを理解しようとしています。基本的に私は

（画像を参照）、個々の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>

使用して高さ：動作とスクロールイベントを実行するように見えるdoesntのDIVアクティブパネル容器100％。私は、アクティブパネルコンテナ内700px、スクロールイベントの作品のような実際の高さを入れて、スクロールバーがアクティブな場合でも：

私も別のものを持っているので、私は相対的な位置との最初のdivを持っていますパネルと一緒にdivを表示してステータスを表示します。

誰にも提案はありますか？私はこれを今のところ把握しようとしています。

Answer 1

#active-panel-containerの親divにheight:100%を与える必要があります。

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