Question

我有一个固定的div，当宽度超过窗口大小时，需要滚动内容。我需要这个div与位置：固定因为它位于一个带有display：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是在调整浏览器窗口大小时需要滚动的（我正在使用Opera和FF），但到目前为止，右边的内容消失了，没有办法看到它。垂直滚动条也没有显示，但如果我使用鼠标滚轮，我可以向下滚动。

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

Answer 1

我需要这个div与位置：固定因为它旁边是一列 display：none，如果我漂浮它或者以任何其他方式定位它占据隐藏的空间列。

隐藏元素同时保留其大小可以使用visibility: hidden样式完成。

固定div内的滚动条

1 个答案: