DIV中的滚动条

Question

如果显示了任何一个，我需要同时显示两个滚动条。有没有办法做到这一点？

现在我使用下面的一个，它只在一个方向上显示。我不应该限制使用Height或Max-Height属性。

.AutoOverflow {
    overflow:auto; 
}

Answer 1

如果需要，overflow: auto 将显示两个滚动条。

这就是你的困惑所在。不查看您的标记和其他相关样式，似乎内容不需要两个滚动条，因此只显示垂直滚动条。

这是因为，默认情况下，内容会自动换行，除非它被明确告知不要这样做。像table这样的元素会尝试收缩拟合，除非被明确告知不要这样做。如果你有一个超过宽度的表格内容，你也会看到水平滚动条。如果你有不换行的内容，你会看到水平滚动条。

演示：

CSS

div {
    border: 1px solid gray;
    height: 100px; width: 200px;
    overflow: auto;
}

div#d2, div#d3 {
    white-space: nowrap;
}

div#d4 > table {
    width: 150%;
}

在上面的小提琴中，请注意每个div：

在第一个示例中，内容是默认换行的简单文本，因此只有垂直滚动条。

在第二种情况下，使用white-space: nowrap;强制内容不换行，并且您只能看到水平滚动条。

第三，强制内容(文本)不换行，但有多个p，因此一旦溢出，您将看到两个滚动条。

第四，有一个表格超过了容器的宽度，因此你可以看到两个滚动条。尝试删除表格上的宽度，您将看到表格尝试收缩适合，因此只有垂直滚动条。