固定div內的滾動條

Question

我有一個固定的div，當寬度超過窗口大小時，需要內容能夠滾動。我需要這個div的位置：fixed，因爲它在顯示：none的列旁邊，如果我浮動它或以任何其他方式定位它，它將佔用該隱藏列的空間。所以問題是我不能讓這個div內的滾動工作。這是一個非常大的CSS，所以我會發布我認爲相關的內容。

CSS

#main { 
    background-color: yellow; 
    height: 100%; 
    overflow: auto; 
    position: fixed; 
    top: 10px; 
    left: 380px; 
} 

#container { 
    background-color: red; 
    height: auto; 
    margin-left: 20px; 
    width: 700px/*655px*/; 
    overflow: auto; 
} 

#tabs { 
    background-color: blue; 
    float: left; 
    height: 100%; 
    margin-top: -187px; 
    margin-left: 20px; 
    width: 500px/*50%*/; 
} 

ul#slider { 
    height: 350px; 
    list-style: none; 
    margin: 0px; 
    padding: 0px; 
    width: 700px; 
    overflow: hidden; 
    position: relative; 
} 

ul#thumb { 
    background-color: #000; 
    list-style: none; 
    margin: 0 0 0 500px; 
    width: 200px; 
    position: relative; 
    overflow: auto; 
    /*overflow: hidden;*/ 
} 

ul#thumb a { 
    border: 1px solid #bfbfbf; 
    display: block; 
    float: left; 
    height: 40px; 
    margin: 10px 0 10px 24px; 
    width: 40px; 
    opacity: 0.75; 
    overflow: hidden; 
} 

和HTML：

<div id="main"> 
<div id="container"> 
    <ul id="slider"> 
     <li id="1"><img src="img/img01.jpg" alt="img01" width="700" height="350" /></li> 
     <li id="2"><img src="img/img02.jpg" alt="img02" width="700" height="350" /></li> 
     <li id="3"><img src="img/img03.jpg" alt="img03" width="700" height="350" /></li> 
     <li id="4"><img src="img/img04.jpg" alt="img04" width="700" height="350" /></li> 
    </ul> 
    <ul id="thumb"> 
     <li><a href="#1"><img src="img/img01.jpg" alt="img01" width="50" height="50" /></a></li> 
     <li><a href="#2"><img src="img/img02.jpg" alt="img02" width="50" height="50" /></a></li> 
     <li><a href="#3"><img src="img/img03.jpg" alt="img03" width="50" height="50" /></a></li> 
     <li><a href="#4"><img src="img/img04.jpg" alt="img04" width="50" height="50" /></a></li> 
    </ul> 
    <img id="title" src="img/title.jpg" width="119" height="61" alt="" /> 
    <div id="tabs"> 
     <div class="verticalslider" id="text"> 
      <ul class="verticalslider_tabs"> 
       <li><a href="#">Tab 01</a></li> 
       <li><a href="#">Tab 02</a></li> 
       <li><a href="#">Tab 03</a></li> 
       <li><a href="#">Tab 04</a></li>       
      </ul> 
      <ul class="verticalslider_contents"> 
       <li> 
        <table> 
         <tr><td>Description tab 01</td></tr> 
        </table> 
       </li> 
       <li> 
        <table> 
         <tr><td>Description tab 02</td></tr> 
        </table> 
       </li> 
       <li> 
        <table> 
         <tr><td>Description tab 03</td></tr> 
        </table> 
       </li> 
       <li> 
        <table> 
         <tr><td>Description tab 04</td></tr> 
        </table> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

「容器」 DIV是一個需要調整瀏覽器窗口（我在工作時要滾動的一個與歌劇和FF），但到目前爲止，右側的內容消失，沒有辦法看到它。垂直滾動條不顯示，但如果我使用鼠標滾輪，我可以向下滾動。

這是一個很大的代碼，我已經嘗試了很多組合，但我開始轉圈了。這可能是一個簡單的答案，但這一點我不明白，所以局外人的觀點會有所幫助。

Answer 1

我需要這樣的DIV的位置是：固定 ，因爲它與 顯示器旁邊一列：沒有，如果我浮起來或 它以任何其他方式位置將 接受這一隱蔽的空間 欄。

在保留元素的同時保留其大小可以使用visibility: hidden樣式完成。