Tampilan bilah gulir vertikal Div

89

Saya bertanya-tanya bagaimana mungkin untuk secara permanen menampilkan bilah vertikal div (berwarna abu-abu jika tidak ada pengguliran) mirip dengan bilah reguler kami. Pada dasarnya saya mencoba untuk menempatkan seluruh situs web dalam div (seperti gmail / facebook), jadi jika halaman tidak cukup panjang seluruh halaman bergeser karena kurangnya bilah gulir vertikal.

Saya butuh solusi untuk masalah ini. Saya mencoba overflow-y: scroll. Tapi sepertinya itu tidak berhasil sama sekali.

html css

— Alec Cerdas
sumber

184

Browser apa yang Anda uji?

DOCType apa yang telah Anda atur?

Bagaimana tepatnya Anda mendeklarasikan CSS Anda?

Apakah Anda yakin tidak melewatkan ;sebelum / sesudah overflow-y: scroll?

Saya baru saja menguji yang berikut ini di IE7 dan Firefox dan berfungsi dengan baik

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

Luaskan cuplikan

— Eoin Campbell
sumber

Juga diuji di IE7 dan FireFox, dan hanya <div style = "overflow-y: scrol"> Hello </div> yang berfungsi.

— Basi

1

ini adalah style sheet yang saya gunakan: #main_container {width: 100%; warna-latar belakang: #eeeeee; overflow-y: gulir; tinggi: 100%; posisi: mutlak; }

— Alec Smart

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

— Alec Smart

oh ini berfungsi sekarang ... terima kasih .. saya kebetulan menempatkan tag gaya yang mengatakan overflow: auto di div, yang menimpa css eksternal saya ...

— Alec Smart

32

Apakah Anda mencoba overflow-y:auto? Ini tidak persis seperti yang Anda inginkan, karena scrollbar hanya akan muncul jika diperlukan.

— kgiannakakis
sumber

31

Selalu: Jika Anda selalu menginginkan scrollbar vertikal, gunakanoverflow-y: scroll;

jsFiddle:

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

Jika diperlukan : Jika Anda hanya menginginkan scrollbar vertikal saat diperlukan, gunakan overflow-y: auto;(Anda perlu menentukan ketinggian dalam kasus ini)

jsFiddle:

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

— Razan Paul
sumber