Hiển thị thanh cuộn dọc Div

87

Tôi đang tự hỏi làm thế nào có thể hiển thị vĩnh viễn thanh dọc của một div (chuyển sang màu xám nếu không có cuộn) tương tự như các thanh thông thường của chúng tôi. Về cơ bản, tôi đang cố gắng đặt toàn bộ trang web trong một div (như gmail / facebook), vì vậy nếu trang đó không đủ dài thì toàn bộ trang sẽ thay đổi do thiếu thanh cuộn dọc.

Tôi cần một giải pháp cho vấn đề này. Tôi đã thử tràn-y: scroll. Nhưng dường như nó không hoạt động chút nào.

html css

— Alec Smart
nguồn

182

Bạn đang thử nghiệm trình duyệt nào?

Bạn đã đặt DOCType nào?

Chính xác thì bạn đang khai báo CSS của mình như thế nào?

Bạn có chắc rằng bạn đã không bỏ lỡ ;trước / sauoverflow-y: scroll không?

Tôi vừa thử nghiệm phần sau trong IE7 và Firefox và nó hoạt động tốt

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

Mở rộng đoạn mã

— Eoin Campbell
nguồn

Cũng đã được thử nghiệm trong IE7 và FireFox, và chỉ <div style = "tràn-y: scrol"> Hello </div> hoạt động.

— Staale

1

đây là biểu định kiểu tôi đang sử dụng: #main_container {width: 100%; background-color: #eeeeee; tràn-y: cuộn; chiều cao: 100%; vị trí: tuyệt đối; }

— Alec Smart

<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Chuyển tiếp // EN" " w3.org/TR/html4/loose.dtd ">

— Alec Smart

oh nó đang hoạt động ... cảm ơn .. tình cờ tôi đã đặt một thẻ kiểu nói tràn: auto trong div, ghi đè lên css bên ngoài của tôi ...

— Alec Smart

30

Bạn đã thử overflow-y:autochưa? Nó không phải là chính xác những gì bạn muốn, vì thanh cuộn sẽ chỉ xuất hiện khi cần thiết.

— kgiannakakis
nguồn

29

Luôn luôn: Nếu bạn luôn muốn thanh cuộn dọc, hãy sử dụngoverflow-y: scroll;

jsFiddle:

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

Khi cần : Nếu bạn chỉ muốn thanh cuộn dọc khi cần, hãy sử dụng overflow-y: auto; (Bạn cần chỉ định chiều cao trong trường hợp này)

jsFiddle:

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

— Razan Paul
nguồn