子スクロール可能な親コンテンツの高さ

Question

の100％とし、高さ、このバイオリンを検討してください：http://jsfiddle.net/eKJAj/

私はその全体の高さの全体の高さを取るために、絶対位置のdiv（赤線）を持つようにしようとしています（黄色）親;親の目に見える高さだけではありません。

フィドルを試してみると、黄色のdivをスクロールすると、赤いバーが完全に下がらないことがわかります。また、青い部分が削除されている場合、親よりも大きくすることはできません。

HTML：

<div class="parent"> 
    <div class="bar"></div> 
    <div class="section"></div> 
    <div class="section2"></div> 
    <div class="section2"></div> 
    <div class="section2"></div> 
    <div class="section2"></div> 
    <div class="section2"></div> 
    <div class="section"></div> 
</div> 

<input type="button" value="hide" onclick="$('.section2').slideUp(400)" /> 
<input type="button" value="show" onclick="$('.section2').slideDown(400)" /> 

CSS：などtop:0px; botom:0pxやposition:relative; margin-left:50pxもが赤い線を浮動してattempsを作った私は青いバーのためのいくつかのオプションをしようとしている

.parent{ 
    position:relative; 
    width:100%; max-height:300px; 
    background-color:yellow; 
    overflow-y:auto; 
} 

.bar{ 
    position:absolute; left:50px; 
    width:1px; height:100%; 
    background-color:red; 
} 

.section, .section2{ 
    width:100%; height:70px; 
    margin-bottom:3px; 
    background-color:blue; 
} 

へ役立たず。

可能であれば、私はむしろそれをCSSだけにしておきたいと思います。どんなヒントも大変感謝しています！

Answer 1

解決策の1つは、.parentを（ノート）コンテナに包むことです。

JSFiddle。

はあなた.parentのコンテナがmax-height、代わりにoverflow-yを持つように設定してください：あなたは300ピクセルに最大の高さを設定しているので、それはあなたの例で働いていない

<div class="container"> 
    <!-- parent in here --> 
</div> 

.container { 
    max-height:300px; 
    overflow-y:auto; 
} 
.parent{ 
    position:relative; 
    width:100%; 
    background-color:yellow; 
} 

理由があります。 100％の高さ.barは300pxの高さを仮定しています。この回避策を使用すると、.parentディバイダの高さの上限は300pxですが、外側の.containerは代わりになります。