フロートをスクロールする

Question

私はHTML/CSSに関しては非常に慣れていませんので、私を助けてください。

私は#to_scroll内で以下のレイアウト

<style> 
#main {background-color: red; width: 30%;} 
#right_al{float: right;} 
#to_scroll{overflow: scroll;} 
</style> 

<div id='main'> 
    <div id='right_al'> 
     CONTENT#foo 
     <div id='to_scroll'> 
     ZZZ<br />ZZZ<br />ZZZ<br />ZZZ<br />ZZZ<br /> 
     ZZZ<br />ZZZ<br />ZZZ<br /> 
     </div> 
    </div> 
    <div id='div1'>CONTENT #1</div> 
    <div id='div2'>CONTENT #2</div> 
    <div id='div3'>CONTENT #3</div> 
    <div id='div4'>CONTENT #4</div> 
    <div id='div5'>CONTENT #5</div> 
</div> 

overflow: scrollを持っているが、私が欲しいものを示すために、それは動作しませんです。 #right_alは親の境界を横切り、フロートをクリアすると親のサイズが大きくなりますが、これは望ましくありません。

jsFiddleリンク：http://jsfiddle.net/5ycnw/

私が欲しいものは、親の内側左に嘘をDIV5する

• DIV1です。
• 左側のdivは、親divが伸びる最大の高さを決定します。右に浮かんだdivには、#mainがオーバーフローしたときにスクロールする子#to_scrollがあります。私が思いついた

ソリューションはright_alの高さを固定含むが、親#mainの高さは、左側のdivの内容に従うものと私はCSSのみで解決策を求めています。

ありがとうございます。

Answer 1

、W3C仕様は、コンテナの内側の高さは、その全体の高さを定義するために使用されますので、何の高さが指定されていない時にコンテナをスクロールできません。これを追加します。

<div id="main"> 
<div id="main-column">...</div> 
<div id="side-bar"> 
    <div id="side-bar-header"> 
    Sidebar Header 
    </div> 
    <div id="side-bar-scroller"> 
     <ul> 
      <li>Option 1</li> 
      <li>Option 2</li> 
      <li>Option 3</li>   
      <li>Option 4</li> 
      <li>Option 5</li> 
      <li>Option 6</li>     
      <li>Option 7</li> 
      <li>Option 8</li> 
      <li>Option 9</li> 
      <li>Option 10</li> 
      <li>Option 11</li> 
      <li>Option 12</li>    
     </ul> 
    </div> 

</div> 

：ここで私は、デモで使用される私のHTML構造は

http://jsfiddle.net/Moonbird_IT/kf3vD/

です：JSコードのビットを使用することはオプションになります場合は、以下のフィドルを見て

ドキュメントが完全に読み込まれると、左側要素（メインコンテンツ要素）の高さ情報が、サイドバー内のスクロール要素の高さから、サイドバーのタイトルを表示するために必要な高さを引いた値に設定されます。

重要な部分は、この短いjQueryの命令のようになります。

$(document).ready(function() { 
    var mainHeight=$('#main-column').height();  
    var sidebarHeaderHeight=$('#side-bar-header').height();  
    $('#side-bar-scroller').css('height', mainHeight-sidebarHeaderHeight); 
});​ 

私は、あなたは間違いなくあなたが置くことができる

Answer 2

「コンテンツ」divの周りにラッパーを配置してから、左に浮動小数点を与えます。

<div id="content-container"> 
    <div id='div1'>CONTENT #1</div> 
    <div id='div2'>CONTENT #2</div> 
    <div id='div3'>CONTENT #3</div> 
    <div id='div4'>CONTENT #4</div> 
    <div id='div5'>CONTENT #5</div> 
</div> 


// CSS 

#content-container { float:left; } 
#main { height:auto; } 

メインタグを閉じる前に、CSSをクリアしてください。私の上記のコメントで述べたように

<div style="clear:both"></div>