HTML : 긴 단락에 대해 세로 스크롤 막대 만있는 DIV를 만드는 방법은 무엇입니까?


136

웹 사이트에 이용 약관을 표시하고 싶습니다. 텍스트 필드를 사용하고 싶지 않으며 전체 페이지를 사용하고 싶지 않습니다. 선택한 영역에 텍스트를 표시하고 세로 스크롤 막대 만 사용하여 아래로 이동하여 모든 텍스트를 읽으려고합니다.

현재이 코드를 사용하고 있습니다 :

<div style="width:10;height:10;overflow:scroll" >
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
</div>

두 가지 문제 :

  1. 너비와 높이를 고정하지 않고 모든 텍스트가 나타날 때까지 펼칩니다.
  2. 두 번째로 가로 스크롤 막대가 표시되고 싶지 않습니다.

너비 / 높이 문제는 "Daniel Vassallo"로 해결되고 가로 스크롤 막대 문제는 "janmoesen"으로 해결됩니다. 이제 누가 대답해야합니까 :) 여러 항목을 선택할 수
있습니까

답변:


238

사용하십시오 overflow-y. 이 속성은 CSS 3입니다.


너비 / 높이 문제는 "Daniel Vassallo"로 해결되고 가로 스크롤 막대 문제는 "janmoesen"으로 해결됩니다. 이제 누가 대답해야합니까 :) 여러 항목을 선택할 수
있습니까

21
그것은 분명하다 : 항상 약한 사람, 즉 가장 낮은 평판을 가진 사람을 선택하라. ;-)
janmoesen

하하하 그러나 귀하의 답변은 "Daniel Vassallo"에 의해 자세히 설명되어 있지 않습니다 :)
Awan

나는 "더 적은 것"을 위해 노력하고 링크가 대화를 할 수있게합니다. 어쨌든, 단지 하나를 고르고 즐거운 주말을 보내십시오!
janmoesen

14
링크가 유효하지 않을 수 있기 때문에 여기의 표준은 링크만으로 질문에 대답하지 않는 것이라 생각합니다. 답변에 직접 질문에 대답 할 수있는 충분한 정보를 포함시킨 다음 참조 용 링크를 포함해야합니다.
Jeffrey Harmon

66

가로 스크롤 막대를 숨기려면 다음과 같이 overflow-x를 숨김으로 설정할 수 있습니다.

overflow-x: hidden;

나는 이것이 asker가 원했던 대답이라고 생각한다.
이안 현명한

52

당신은 지정해야 widthheight의를 px:

width: 10px; height: 10px;

또한 overflow: auto;가로 스크롤 막대가 표시되지 않도록하는 데 사용할 수 있습니다 .

따라서 다음을 시도 할 수 있습니다.

<div style="width:100px; height:100px; overflow: auto;" >
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
</div>

너비와 높이는 현재 작동하지만 가로 스크롤 막대는 여전히 제거되지 않습니다.
Awan

너비 / 높이 문제는 "Daniel Vassallo"로 해결되고 가로 스크롤 막대 문제는 "janmoesen"으로 해결됩니다. 이제 누가 대답해야합니까 :) 여러 항목을 선택할 수
있습니까

19

먼저 감사합니다

사용 overflow:auto나를 위해 작동합니다.

가로 스크롤 막대가 사라집니다.


15

어떤 경우 세트의 경우 overflow-xhidden나는 세트에 선호 max-height사업부의 높이의 확장을 제한하기 위해. 코드는 다음과 같아야합니다.

overflow-y: scroll;
overflow-x: hidden;
max-height: 450px;

13

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

height: 100px;   
overflow-y : scroll;

또는

height: 100px; 
overflow-y : auto;

2
사용하는 것을 선호합니다 max-height: 100px;.
로마

내 구성으로 인해 height누락되어 세로 스크롤 막대가 표시되지 않았지만 height:100%;더 잘 작동했습니다.
SharpC


2

overflow 속성을 사용할 수 있습니다

style="overflow: scroll ;max-height: 250px; width: 50%;"

1

나는 또한 같은 문제에 직면했다 ...이를 시도하십시오 ... 이것은 나를 위해 일했다

        .scrollBbar 
        {
        position:fixed;
        top:50px;
        bottom:0;
        left:0;
        width:200px;
        overflow-x:hidden;
        overflow-y:auto;
       }

0

이것은 내 믹스입니다 :

overflow-y: scroll;
height: 13em; // Initial height.
resize: vertical; // Allow user to change the vertical size.
max-height: 31em; // If you want to constrain the max size.
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.