css - 固定 div 内的滚动条

Question

我有一个固定的 div，当它的宽度超过窗口大小时，我需要内容能够滚动。我需要这个带有 position: fixed 的 div，因为它位于带有 display: none 的列旁边，如果我 float 它或以任何其他方式定位它，它将占用该隐藏列的空间。所以问题是我无法在这个 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 是调整浏览器窗口大小时需要滚动的那个(我正在使用 Opera 和 FF)，但到目前为止右边的内容就消失了，没有办法看到它。垂直滚动条也不显示，但如果我使用鼠标滚轮，我可以向下滚动。

这是一个很大的代码，我已经尝试了很多组合，但我开始绕圈子了。这可能是一个简单的答案，但在这一点上我无法弄清楚，所以局外人的观点会有所帮助。

Answer 1

I need this div with position: fixed because it's next to a column with display: none, and if I float it or position it in any other way it will take up the space of that hidden column.

隐藏元素同时保持其大小可以通过 visibility: hidden 样式来实现。