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

Jawaban:

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