下からULを開始するとスクロールバーが消える

Question

Ulアイテムが下から始まり、コンテナの高さに当たったときにスクロールバーが表示されます。一番上から始めると機能しますが、一番下からは失敗します。

http://jsfiddle.net/4c4crfhb/3/

HTML

<div id="container"> 
<div class="big"></div> 
<div class="parent"> 
    <ul> 
     <li>Element #1</li> 
     <li>Element #2</li> 
     <li>Element #3</li> 
     <li>Element #4</li> 
     <li>Element #5</li> 
     <li>Element #6</li> 
     <li>Element #7</li> 
     <li>Element #8</li> 
     <li>Element #9</li> 
    </ul> 
</div> 

CSS

.parent { 
    background-color: gold; 
    overflow-y: scroll; 
} 

#container ul { 
    list-style: none; 
    margin: 0; 
    position: absolute; 
    /*top: 31px; */ 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

#container { 
    height: auto; 
    display: -moz-box; 
    display: -webkit-box; 
    display: box; 
} 

#container div{ 
    position: relative; 
    width: 200px; 
    display: -moz-box; 
    display: -webkit-box; 
    display: box; 
} 

#container div.big{ 
    height: 100px; 
    background-color: darkcyan; 
} 

問題は何ですか？

私が達成したいのは、スラックやスカイプのチャットのようなものです。チャットアイテムは、下から開始して上に移動し、オーバーフローした場合はスクロールバーを表示します。私はここで行ったよう

Answer 1

Javascriptがあなたの問題を解決することができます：

var big = document.getElementById("big"); // OR SET HEIGHT OF PARENT USING CSS 
var parent = document.getElementById("parent"); 

parent.style.height = big.offsetHeight + 'px'; // OR SET HEIGHT OF PARENT USING CSS 
parent.scrollTop = parent.scrollHeight; 

実施例を：http://jsfiddle.net/4c4crfhb/7/

私はまた、あなたのCSSを編集しました。フィドルを見てみましょう;）

編集：ここでは

を<UL>に新しい行を追加すると、下にScrollpositionを設定すると例です。http://jsfiddle.net/4c4crfhb/9/

Answer 2

とき要素のhtml絶対位置にあり、一番下に固定されている場合、親の場合はそれを超えません。これがスクロールが機能しない理由です。