css - DIV 中的滚动条

Question

如果显示任何一个，我需要同时显示两个滚动条。有什么办法可以做到这一点

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

.AutoOverflow {
    overflow:auto; 
}

Answer 1

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

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

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

演示:http://jsfiddle.net/abhitalks/4wWNU/4/

CSS:

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

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

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

在上面的 fiddle 中，注意每个 div:

首先，内容是默认情况下换行的简单文本，因此只有垂直滚动条。

第二步，使用 white-space: nowrap; 强制内容不换行，您只能看到水平滚动条。

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

第四，有一个表格超出了容器的宽度，因此您可以看到两个滚动条。尝试移除表格的宽度，您会看到表格试图收缩以适应，因此只有垂直滚动条。