Css 固定分区内的滚动条

我有一个固定的div，需要的内容能够滚动时，其宽度超过窗口大小。我需要这个position:fixed的div，因为它位于display:none的列旁边，如果我浮动它或以任何其他方式定位它，它将占用隐藏列的空间。所以问题是我无法在这个div中使用滚动条。它是一个相当大的CSS，所以我将发布我认为相关的内容

CSS

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

说明选项卡01


说明选项卡02


说明选项卡03


说明选项卡04

“container”div是一个在调整浏览器窗口大小时需要滚动的div（我正在使用Opera和FF），但到目前为止，右边的内容只是消失了，无法看到它。垂直滚动条也不显示，但如果我使用鼠标滚轮，我可以向下滚动

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

我需要这个位置：固定的 因为它紧挨着一列 显示：无，如果我将其浮动或 以任何其他方式将其定位 占据隐藏的空间 专栏

隐藏元素同时保留其大小可以通过

可见性：hidden

样式完成

我需要这个位置：固定的 因为它紧挨着一列 显示：无，如果我将其浮动或 以任何其他方式将其定位 占据隐藏的空间 专栏

---

隐藏元素同时保留其大小可以通过

可见性：hidden

样式来完成。

我尝试过可见性：hidden，但是javascript会中断，并且单击时隐藏列不会显示（我没有太多权限更改javascript）。使用display:none也会保留元素的大小，您可以测试它，我有。我正在使用display：如果我不固定它的位置，除了下面的div之外，没有一个会占用这个空间。也许还有其他原因……感谢NGLN，我接受了你的建议并更改了javascript:）我确实尝试了可见性：隐藏，但随后javascript中断，隐藏列在单击时不显示（我没有太多权限更改javascript）。使用display:none也保留了元素的大小，您可以测试它，我有。我正在使用display：如果我不固定它的位置，除了下面的div之外，没有一个会占用这个空间。也许还有其他原因……谢谢NGLN，我同意你的建议并更改了javascript:）

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