내 div에 수직 스크롤바를 자동으로 추가하려면 어떻게해야합니까?


110

내 .NET Framework에 세로 스크롤바를 추가하고 싶습니다 <div>. 시도 overflow: auto했지만 작동하지 않습니다. Firefox와 Chrome에서 내 코드를 테스트했습니다.

여기에 div 스타일 코드를 붙여 넣습니다.

float: left;
width: 1000px;
overflow: auto;

마크 업을 가진 jsfiddle 이상의 CSS
Ritabrata 가우 탐

12
이것을 시도하십시오 : overflow-y:scroll그리고 약간의 높이 . 이 문서를 살펴보십시오 .
Mr_Green

답장을 보내 주신 Mr_Green에게 감사드립니다. 그러나이 코드는 나를 위해 작동하지 않습니다.
제이

Scroll이 작동하도록하려면 내부 콘텐츠가 오버플로 되어야 합니다 .
Mr_Green

여기에 html 및 css 코드를 게시하십시오.
Mr_Green

답변:


145

overflow: auto;속성이 작동 하도록하려면 높이를 할당해야합니다 .
테스트 목적으로 추가 height: 100px;하고 확인하십시오.
또한 , overflow-y:auto;대신 제공 overflow: auto;하면 요소가 가로가 아닌 세로로만 스크롤되므로 더 좋습니다 .

float:left;
width:1000px;
overflow-y: auto;
height: 100px;

컨테이너의 높이를 모르고 컨테이너가 고정 높이에 도달했을 때 수직 스크롤바를 표시 100px하려면 속성 max-height대신 사용하십시오 height.

자세한 내용은이 MDN 기사를 참조하십시오 .


예, 요점을 얻고 테스트했습니다. Chrome에서는 잘 작동하지만 FireFox에서는 작동하지 않습니다. 한 가지 더 혼란스러운 점은 수직 스크롤바가 FF의 페이지로드 시간에 나타나지만 페이지로드가 완료되면 사라 졌다는 것입니다!
제이

"당신은 약간의 높이를 할당해야합니다"정확히 내 문제, 감사합니다! : P
Wagner da Silva

51

max-height속성 을 추가해야 합니다.

.ScrollStyle
{
    max-height: 150px;
    overflow-y: scroll;
}
<div class="ScrollStyle">
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
</div>


20

다음을 설정할 수 있습니다.

overflow-y: scroll;height: XX px

2
이것은 이전 답변에서 제안되었습니다.
UmNyobe 2015

14

div-popup. 적용하려면 다음 스타일을 div 요소에 추가하세요.

overflow-y: scroll;
height: XXXpx;

height지정은 DIV의 높이가 될 것이며,이 높이를 초과 할 내용이 있으면 일단, 당신은 그것을 스크롤해야합니다.

감사합니다.


13

div에 세로 스크롤 막대를 표시하려면 다음을 추가해야합니다.

height: 100px;   
overflow-y : scroll;

또는

height: 100px; 
overflow-y : auto;

10

div를 사용하려는 목적이 무엇인지 잘 모르겠지만 이것은 임의의 텍스트가 포함 된 예제입니다.

Mr_Green이 추가하라고 말했을 때 올바른 지시를 내 렸습니다. overflow-y: auto 수직 스크롤로 제한하므로 . 다음은 JSFiddle 예제입니다.

JSFiddle


우선 @Mr_Green 귀하의 제안은 Chrome에서는 잘 작동하지만 FF에서는 작동하지 않습니다. 내 디자인 구조를 위해 Div에 Height를 추가 할 수 없기 때문에 Height를 추가하는 대안이 있습니까?
제이

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.