Відображення вертикальної смуги прокрутки Div


87

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

Мені потрібне рішення цієї проблеми. Я спробував overflow-y: scroll. Але, здається, це взагалі не працює.

Відповіді:


182

В якому браузері ви тестуєте?

Який тип DOCT ви встановили?

Як саме ви заявляєте свій 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"> Привіт </div> працює.
Staale

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

<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Перехідний // EN" " w3.org/TR/html4/loose.dtd ">
Алек Смарт

о, зараз це працює ... дякую .. я bychance розмістив тег стилю із надписом overflow: auto у div, який перезаписав мій зовнішній css ...
Alec Smart

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.