Przewijanie Floata

Question

Jestem dość niedoświadczony, jeśli chodzi o HTML/CSS, więc proszę, pomóżcie mi.

Mam następujący układ

<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 wewnątrz #to_scroll jest pokazanie, czego chcę, to nie działa. #right_al przekracza granicę nadrzędną, a wyczyszczenie zmiennoprzecinkowego zwiększy rozmiar rodzica, czego nie chcę.

jsFiddle Link: http://jsfiddle.net/5ycnw/

co chcę

• div1 do div5 leży na lewym wewnątrz rodzica.
• DIVs po lewej stronie określają maksymalną wysokość, do której rozciąga się div rodzica. Div po prawej stronie ma dziecko #to_scroll, które przewija się, gdy jego zawartość przepełnia się #main.

Rozwiązanie wymyśliłem obejmuje ustalanie wysokości right_al, ale wysokość rodzica #main podlega treści na lewym div i chcę CSS jedynym rozwiązaniem.

Z góry dziękuję.

Answer 1

Jak wspomniano powyżej w moim komentarzu, że specyfikacje W3C nie pozwoli pojemników przewijania, gdy nie jest podana, ponieważ wysokość wewnętrzna wysokość kontenera zostaną wykorzystane do określenia jej całkowitą wysokość. W przypadku korzystania kawałek kodu JS byłaby opcja, przyjrzeć się następującym Fiddle:

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

oto moja struktura HTML użyłem w demo:

<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> 

Po całkowitym załadowaniu dokumentu informacje o wysokości lewego elementu (głównego elementu treści) zostaną użyte do ustawienia wysokości przewijanego elementu w pasku bocznym, pomniejszonej o wysokość niezbędną do wyświetlenia tytułu paska bocznego.

Zasadniczą część byłaby ta krótka instrukcja jQuery:

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

Przetestowałem kod w Chrome tylko więc na pewno trzeba trochę tam dostrajania :-)

Answer 2

Umieść opakowanie wokół elementów "content", a następnie nadaj mu lewę.

<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; } 

Zanim zamkniesz główny znacznik, wyczyść CSS. Dodaj to:

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