コンテンツをスクロール可能にするには、bottom：0に設定します。

Question

私は絶対divが相対divの底にくっついています。私がしたいのは、内側のdivをそのサイズが外側のdivよりも大きくなるたびにスクロール可能（上向き）にすることだけです。

しかし、それは起こりません。 divはスクロール可能にならない！ここではフィドルだ：https://jsfiddle.net/xggjmjqc/

HTML：

<div class="mobile1"> 
    <div class="bottom1"> 
    </div> 
</div> 

<br><br> 

<!-- when inner gets bigger than outer: --> 

<div class="mobile2"> 
    <div class="bottom2"> 
    </div> 
</div> 

CSS：

.mobile1{ 
    height:400px; 
    width: 300px; 
    background-color: red; 
    position: relative 
} 

.bottom1{ 
    height:100px; 
    width: 300px; 
    position: absolute; 
    bottom: 0; 
    background-color: blue; 
} 

/* when inner gets bigger than outer: */ 

.mobile2{ 
    height:400px; 
    width: 300px; 
    background-color: red; 
    position: relative; 
    overflow-y: scroll; 
} 

.bottom2{ 
    height:500px; 
    width: 300px; 
    position: absolute; 
    bottom: 0; 
    background-color: blue; 
} 

Answer 1

位置absoluteを使用すると、それがある意味、ドキュメントフローから要素がかかりますが、から "独立" であります他の要素。 位置相対を使用すると、外側のdivが内側に反応し、スクロールが表示されます。

.bottom2{ 
    height:500px; 
    width: 300px; 
    position: relative; 
    bottom: 0; 
    background-color: blue; 
} 

フィドル：下にいくつかのJavaScriptの設定スクロールしてhttps://jsfiddle.net/djwave28/xggjmjqc/3/

編集 ： https://jsfiddle.net/djwave28/xggjmjqc/6/