Question

我一直致力于创建一个具有最大高度的下拉菜单，并在元素超出它时放置垂直滚动条。出于某种原因，添加此垂直滚动条时，宽度不会自动调整以补偿垂直滚动条的宽度，也会创建一个水平滚动条。

这是一个fiddle，因此您可以看到我的问题的简化版本。任何人都有一个很好的解决方案（除了设置宽度，因为我希望它适应内部的内容，最好没有JavaScript）？

.wrapper { display:inline-block; max-height:200px; overflow-y:auto; background:#f00;}

.wrapper > a { display:inline-block; padding:20px; white-space:nowrap; }

Answer 1

您可以使用overflow-y:scroll。

.wrapper {
    overflow-y:scroll;
    overflow-x:hidden;
}

小提琴：http://jsfiddle.net/4e00dp7w/2/

请注意，overflow-x:hidden并非真的需要，但以防万一。

Answer 2

我会设置......

.wrapper{
overflow-x:hidden;
overflow-y:auto;
}

这样滚动条只会显示内部内容是否高于包装器。

Answer 3

添加垂直滚动条时，将从容器内部占用一些空间，在本例中为.wrapper。为避免这种情况，您可以将overflow-x: hidden添加到.wrapper.类，如下所示：

.wrapper { 
    display:inline-block;
    max-height:200px;
    overflow-y:auto;
    background:#f00;
}

但是，正如我所说，它从容器内部占用空间，因此您的内容可能会被滚动条覆盖。解决此问题的方法是在.wrapper类中添加一点填充，以补偿滚动条占用的空间。

.wrapper { 
    display:inline-block;
    max-height:200px;
    overflow-y:auto;
    background:#f00;
    overflow-x: hidden;
    padding-right: 10px;
}

工作样本：http://jsfiddle.net/4e00dp7w/7/

在元素上放置最大高度会创建水平滚动条

3 个答案: