Показать вертикальную полосу прокрутки Div


87

Мне интересно, как можно постоянно отображать вертикальную полосу div (выделенную серым цветом, если нет прокрутки), аналогичную нашим обычным полосам. В основном я пытаюсь разместить весь веб-сайт в div (например, gmail / facebook), поэтому, если страница недостаточно длинная, вся страница сдвигается из-за отсутствия вертикальной полосы прокрутки.

Мне нужно решение этой проблемы. Я пробовал overflow-y: scroll. Но, похоже, это совсем не работает.

Ответы:


182

В каком браузере вы тестируете?

Какой DOCType вы установили?

Как именно вы объявляете свой CSS?

Вы уверены, что не пропустили ;до / после overflow-y: scroll?

Я только что протестировал следующее в IE7 и Firefox, и он отлично работает

<!-- Scroll bar present but disabled when less content -->
<div style="width: 200px; height: 100px; overflow-y: scroll;">
  test
</div>

<!-- Scroll bar present and enabled when more contents -->        
<div style="width: 200px; height: 100px; overflow-y: scroll;">
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
</div>


Также протестирован в IE7 и FireFox, и работает только <div style = "overflow-y: scrol"> Hello </div>.
Staale

1
это таблица стилей, которую я использую: #main_container {width: 100%; цвет фона: #eeeeee; переполнение-y: прокрутка; высота: 100%; позиция: абсолютная; }
Алек Смарт

<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" " w3.org/TR/html4/loose.dtd ">
Алек Смарт

о, теперь он работает ... спасибо ... я случайно поместил тег стиля с надписью overflow: auto в div, который перезаписал мой внешний css ...
Алек Смарт

30

Вы пробовали overflow-y:auto? Это не совсем то, что вам нужно, поскольку полоса прокрутки появляется только при необходимости.


29

Всегда: если вам всегда нужна вертикальная полоса прокрутки, используйтеoverflow-y: scroll;

jsFiddle:

<div style="overflow-y: scroll;">
......
</div>

При необходимости : если вам нужна только вертикальная полоса прокрутки при необходимости, используйте overflow-y: auto;(в этом случае вам нужно указать высоту)

jsFiddle:

<div style="overflow-y: auto; height:150px; ">
....
</div>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.