UL或DIV垂直滚动条

Question

我在我的页面上遇到了垂直滚动条的问题。我有很多项在div里面的ul里面，我尝试了在div的样式中使用overflow:auto，但是没有帮助。如何将垂直滚动条添加到ul或div中？

<div id="content">
<p>some text</p>
<ul>
<li>text</li>
.....
<li>text</li>
</div>

- Damir

---

网页中多余的滚动条会使其不易访问，使用起来更加繁琐。我并不是说它们没有用处；只是在添加不必要的滚动条之前，请确保您已经深思熟虑用户如何与页面进行交互。 - zzzzBov

Answer 1

您需要定义ul或div的高度，并将overflow设置为auto，如下所示：

<ul style="width: 300px; height: 200px; overflow: auto">
  <li>text</li>
  <li>text</li>

- subosito

---

滚动条有没有可能不可见？ - Damir

你说的 uninvisible 是什么意思？你可以通过改变高度的最小值或最大值来得到你想要的输出。 - subosito

我明白了。我认为你需要使用JavaScript插件来完成这个任务。请查看http://jscrollpane.kelvinluck.com/。 - subosito

我听说它在IPAD/Android上不起作用...有人能证明或否认吗？ - TryHarder

由于某种原因，这导致弹性盒子布局的列出现了错误。 - Raul Chiarella

Answer 2

您需要在 DIV 上设置高度。否则它将无限制地扩展。

- Robusto

---

楼主要求垂直滚动条。 - Rubens Mariuzzo

@RubensMariuzzo：这就是这个答案的内容。 - Robusto

Answer 3

有时将高度设置为像素值是不合适的。但是，可以通过将

的高度设置为100％并将overflow设置为auto来显示垂直滚动条。

让我举个例子：

<div id="content" style="height: 100%; overflow: auto">
  <p>some text</p>
  <ul>
    <li>text</li>
    .....
    <li>text</li>
</div>

- StepUp

Answer 4

这对我有效：

<ul style="height: 100%; overflow: auto"
  <li>text1</li>
  ....
  <li>text100</li>
</ul>

- E Business

---

这实际上和几年前@StepUp的答案（链接：https://dev59.com/M2855IYBdhLWcg3w3Ibr#50141994）不是一样的吗？ - Jeremy Caney

不是完全一样，但对我来说可以用，谢谢。 - E Business