固定要素をCSSで親の目に見える境界内に留めるにはどうすればいいですか？

Question

これは私のレイアウトです、黄色い部分が修正されました。サイドバーを縮小/拡大して緑色のフッターを越えないようにするための簡単なスクリプトを作ったので、CSSでのみ同じことを達成できますか？

は、ここでは、アクションでそれを参照してください。http://jsfiddle.net/RWxGX/203/

HTML、CSS、ウィンドウをスクロールしたとき、緑の部分が上がる時に固定黄色のサイドバーが収縮するように、私はシンプルなjqueryのスクリプトを作りました、JS：

<div id="content"> 
    <div id="sidebar"> 
    <div id="sidebar-container"> 
     <div id="sidebar-wrapper"> 
     <div id="sidebar-content"> 
      height: 300px 
     </div> 
     </div> 
    </div> 
    </div> 
    <div id="article"> 
    Scroll me to see the sidebar shrink 
    </div> 
</div> 
<div id="footer"> 

</div> 

body { 
    padding: 0; 
    margin: 0; 
    min-height: 100%; 
} 
#content { 
    display: flex; 
    justify-content: stretch; 
} 

#sidebar { 
    height: inherit; 
    width: 100px; 
    flex: 0 0 auto; 
    background-color: red; 
} 

#article { 
    background-color: orange; 
    flex-grow: 1; 
    font-size: 55px; 
} 

#sidebar-container { 
    position: fixed; 
    max-height: 100%; 
    height: inherit; 
    width: inherit; 
    background-color: red; 
    display: flex; 
    flex-direction: column; 
} 

#sidebar-wrapper { 
    background-color: yellow; 
    overflow-y: scroll; 
} 

#sidebar-content { 
    background-color: rgba(255, 0, 0, 0.1); 
    height: 20000px; 
} 

#mainbar { 
    background-color: blue; 
} 

#content { 
    height: 300px; 
    width: 500px; 
    background-color: rgba(255, 255, 255, 0.75); 
} 
#footer { 
    height: 2000px; 
    width: 500px; 
    background-color: green; 
} 

$(document).ready(function() { 
    var sidebar_container = $('#sidebar-container'); 
    var sidebar_content = $('#sidebar-content'); 
    var footer = $('#footer'); 
    $(window).scroll(function() { 
    sidebar_container_height = 
     Math.max(
     Math.min(
      footer.offset().top - $(window).scrollTop(), 
      $(window).height()), 
     0); 
    sidebar_container.css('height', sidebar_container_height + 'px'); 
    sidebar_content.text('height: ' + sidebar_container_height + 'px'); 
    }) 
}) 

Answer 1

私は場合によってはを使用して解決できると思います0 on #footerしかし、これはフッターにサイドバーを覆い、サイドバーのサイズを変更しません。