Div 수직 스크롤바 쇼

88

일반 막대와 유사한 div의 수직 막대 (스크롤링이없는 경우 회색으로 표시됨)를 영구적으로 표시 할 수있는 방법이 궁금합니다. 기본적으로 전체 웹 사이트를 div (예 : gmail / facebook)에 배치하려고하므로 페이지가 충분히 길지 않으면 세로 스크롤 막대가 없기 때문에 전체 페이지가 이동합니다.

이 문제에 대한 해결책이 필요합니다. 나는 overflow-y : scroll을 시도했다. 그러나 전혀 작동하지 않는 것 같습니다.

html css

— 알렉 스마트
소스

183

어떤 브라우저에서 테스트하고 있습니까?

어떤 DOCType을 설정 했습니까?

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"> Hello </ div> 만 작동합니다.

— Staale

1

이것이 제가 사용하고있는 스타일 시트입니다. #main_container {width : 100 %; background-color : #eeeeee; overflow-y : 스크롤; 높이 : 100 %; 위치 : 절대; }

— Alec Smart

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

— Alec Smart

오 이제 작동 중입니다 ... 감사합니다 .. i bychance는 overflow : auto라는 스타일 태그를 div에 배치했습니다.이 태그는 내 외부 CSS를 덮어 썼습니다 ...

— Alec Smart

32

시도해 보셨습니까 overflow-y:auto? 스크롤바는 필요할 때만 나타나기 때문에 정확히 원하는 것이 아닙니다.

— 키안 나카 키스
소스

31

항상 : 항상 세로 스크롤바를 원하면overflow-y: scroll;

jsFiddle :

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

필요할 때 : 필요할 때만 세로 스크롤바를 원할 경우 overflow-y: auto;(이 경우 높이를 지정해야 함)

jsFiddle :

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

— 라잔 폴
소스