滾動浮動

Question

對於HTML/CSS，我很缺乏經驗，所以請幫助我。

我有以下佈局

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

內#to_scroll的overflow: scroll是展示我想，這是行不通的。 #right_al跨越父界，清除浮點數將增加父類的大小，這是我不想要的。

的jsfiddle鏈接：http://jsfiddle.net/5ycnw/

我要的是

• DIV1至DIV5左側父裏面謊言。
• 左邊的div決定父div伸展到的最大高度。浮動在右邊的div有一個孩子#to_scroll，當它的內容溢出#main時它會滾動。

一個解決方案，我想出了包括固定right_al的高度，但父#main的高度受到左邊div的內容，我想一個CSS唯一的解決辦法。

在此先感謝。

Answer 1

正如我上面的評論中提及，在W3C規範不會允許滾動容器時，沒有給出高度，因爲容器的內部高度將被用來定義其總高度。如果使用的是位的JS代碼將是一種選擇，看看下面的小提琴：

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

這裏是我的HTML結構我在演示中使用：

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

當文檔完全加載時，左側元素（主要內容元素）的高度信息將用於設置側欄內滾動元素的高度減去顯示側欄標題所需的高度。

的重要組成部分就是這短短的jQuery指令：

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

我測試的代碼在Chrome中只有那麼你肯定會需要一點點微調存在的:-)

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>