Scrollen der Float

Question

Ich bin ziemlich unerfahren, wenn es um HTML/CSS geht, also bitte helfen Sie mir.

Ich habe folgendes Layout

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

Die overflow: scroll innerhalb #to_scroll ist, zu zeigen, was ich will, es funktioniert nicht. Die #right_al überquert die Elterngrenze und das Löschen des Floats wird die Größe des Elternteils erhöhen, was ich nicht möchte.

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

Was ich will, ist

• div1 liegt auf der linken Seite innerhalb des übergeordneten div5.
• Die divs auf der linken Seite entscheiden über die maximale Höhe, die das Elternteil dehnt. Das div floated auf der rechten Seite hat ein Kind #to_scroll, das scrollt, wenn sein Inhalt den #main überläuft.

Eine Lösung kam ich mit beinhaltet die Höhe der right_al Festsetzung, aber die Höhe der Mutter ist #main unterliegt den Inhalt auf dem linken Seite divs und ich mag eine CSS einzige Lösung.

Vielen Dank im Voraus.

Answer 1

Wie in meinem obigen Kommentar erwähnt, ist die W3C-Spezifikationen nicht Scrollen Container ermöglichen, wenn keine Höhe gegeben ist, weil die Innenhöhe des Behälters verwendet werden, um seine Gesamthöhe zu definieren. Bei Verwendung wäre ein wenig JS-Code eine Option sein, einen Blick auf die folgende Fiddle:

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

Hier ist meine HTML-Struktur I in der Demo verwendet:

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

Wenn das Dokument vollständig geladen ist, werden die Höheninformationen des linken Elements (Hauptinhaltselement) verwendet, um die Höhe des Bildlaufelements innerhalb der Seitenleiste abzüglich der Höhe festzulegen, die zum Anzeigen des Titels der Seitenleiste erforderlich ist.

Der wesentliche Teil dieser kurze jQuery Anweisung wäre:

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

ich den Code in Chrome getestet nur so dass Sie auf jeden Fall ein wenig Feinabstimmung benötigt, da :-)

Answer 2

Legen Sie einen Wrapper um die "Inhalt" divs, und geben Sie dann das eine Float von links.

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

Bevor Sie das Haupt-Tag schließen, machen Sie ein CSS-Clear. Fügen Sie diese:

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