Question

我有一个div，我需要一个永久垂直滚动条。有时会需要滚动条，因为div将包含多余的内容，有时则不需要它但我希望外观保持一致 - 即使div中没有多余内容我希望它包含滚动条。我尝试了这个但是当没有多余的内容时它没有添加滚动条：

div#collection
{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: 0 0 0 0;
    float: right;
    width: 200px;
    height: 100%;
    background: white;
    overflow:scroll;
}

我也尝试将高度增加到200％（html和body设置为100％）然后整个页面滚动 - 这不是我想要的 - 我希望div单独滚动而页面的其余部分仍然存在它在哪里。

有什么建议吗？

Answer 1

尝试在div中放置一个包装容器，并将其设置为高度：101％。

Answer 2

大多数较新的浏览器都支持CSS3的overflow-x和overflow-y：

div.verticalscroll {
    overflow: auto; /* For browsers that can't do overflow-y */
    overflow-y: scroll; /* Controls overflow on the y-axis */
}

请参阅http://www.brunildo.org/test/Overflowxy2.html

Answer 3

给顶部容器一个高度和一个溢出y：滚动，然后有一个子容器用于其余内容，其中min-height设置为比容器高度高几个像素。

div#collection
{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: 0 0 0 0;
    float: right;
    width: 200px;
    height: 400px;
    background: white;
    overflow:scroll;
}

div#sub {
    min-height: 402px;
}

<div id="collection">
    <div id="sub">
        Content goes here.
    </div>
</div>

Answer 4

使用overflow:auto它会做你想做的事情

Answer 5

尝试overflow-y：滚动......这样就可以了！

Answer 6

overflow: -moz-scrollbars-vertical;
overflow-y: scroll;

这可以帮到你

替代“溢出：滚动;”在div中创建一个永久垂直滚动条？

6 个答案: