Pokazuje pionowy pasek przewijania Div

87

Zastanawiam się, jak można na stałe wyświetlić pionowy pasek elementu div (wyszarzony, jeśli nie ma przewijania), podobny do naszych zwykłych słupków. Zasadniczo staram się umieścić całą witrynę w div (jak gmail / facebook), więc jeśli strona nie jest wystarczająco długa, cała strona przesuwa się z powodu braku pionowego paska przewijania.

Potrzebuję rozwiązania tego problemu. Próbowałem overflow-y: scroll. Ale wydaje się, że w ogóle nie działa.

html css

— Alec Smart
źródło

182

W jakiej przeglądarce testujesz?

Jaki DOCType ustawiłeś?

Jak dokładnie deklarujesz swój CSS?

Czy na pewno nie przegapiłeś ;przed / po overflow-y: scroll?

Właśnie przetestowałem następujące elementy w IE7 i Firefox i działa dobrze

<!-- 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>

Rozwiń fragment

— Eoin Campbell
źródło

Przetestowany również w IE7 i FireFox, i działa tylko <div style = "overflow-y: scrol"> Witaj </div>.

— Staale

1

to jest arkusz stylów, którego używam: #main_container {width: 100%; background-color: #eeeeee; overflow-y: scroll; wysokość: 100%; pozycja: bezwzględna; }

— Alec Smart

<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" " w3.org/TR/html4/loose.dtd ">

— Alec Smart

och, teraz działa ... dzięki ... przez przypadek umieściłem tag stylu z napisem przepełnienie: auto w div, który nadpisał mój zewnętrzny css ...

— Alec Smart

30

Czy próbowałeś overflow-y:auto? Nie jest to dokładnie to, czego chcesz, ponieważ pasek przewijania pojawi się tylko wtedy, gdy będzie potrzebny.

— kgiannakakis
źródło

29

Zawsze: jeśli chcesz zawsze używać pionowego paska przewijania, użyjoverflow-y: scroll;

jsFiddle:

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

W razie potrzeby : jeśli chcesz, aby pionowy pasek przewijania był potrzebny tylko wtedy, gdy jest to potrzebne, użyj opcji overflow-y: auto;(w tym przypadku musisz określić wysokość)

jsFiddle:

<div style="overflow-y: auto; height:150px; ">
....
</div>

— Razan Paul
źródło