반응형
HTML : 긴 단락에 대해 세로 스크롤 막대 만있는 DIV를 만드는 방법은 무엇입니까?
웹 사이트에 이용 약관을 표시하고 싶습니다. 텍스트 필드를 사용하고 싶지 않으며 전체 페이지를 사용하고 싶지 않습니다. 선택한 영역에 텍스트를 표시하고 세로 스크롤 막대 만 사용하여 아래로 이동하여 모든 텍스트를 읽으려고합니다.
현재이 코드를 사용하고 있습니다 :
<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>
두 가지 문제 :
- 너비와 높이를 고정하지 않고 모든 텍스트가 나타날 때까지 펼칩니다.
- 두 번째로 가로 스크롤 막대가 표시되고 싶지 않습니다.
사용하십시오 overflow-y
. 이 속성은 CSS 3입니다.
가로 스크롤 막대를 숨기려면 다음과 같이 overflow-x를 숨김으로 설정할 수 있습니다.
overflow-x: hidden;
당신은 지정해야 width
와 height
의를 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>
먼저 감사합니다
사용 overflow:auto
나를 위해 작동합니다.
가로 스크롤 막대가 사라집니다.
어떤 경우 세트의 경우 overflow-x
에 hidden
나는 세트에 선호 max-height
사업부의 높이의 확장을 제한하기 위해. 코드는 다음과 같아야합니다.
overflow-y: scroll;
overflow-x: hidden;
max-height: 450px;
div에 세로 스크롤 막대를 표시하려면 추가해야합니다
height: 100px;
overflow-y : scroll;
또는
height: 100px;
overflow-y : auto;
overflow-y : scroll;
overflow-x : hidden;
height
선택 사항입니다
overflow 속성을 사용할 수 있습니다
style="overflow: scroll ;max-height: 250px; width: 50%;"
나는 또한 같은 문제에 직면했다 ...이 작업을 시도해보십시오 ... 이것은 나를 위해 일했습니다.
.scrollBbar
{
position:fixed;
top:50px;
bottom:0;
left:0;
width:200px;
overflow-x:hidden;
overflow-y:auto;
}
반응형
'IT' 카테고리의 다른 글
프로세스 이름을 기반으로 나열된 프로세스를 필터링하는 Linux의 top -c 명령 (0) | 2020.07.07 |
---|---|
신속한 Date 객체를 작성하는 방법 (0) | 2020.07.07 |
오류 : 프로그램 유형이 이미 있습니다 : android.support.design.widget.CoordinatorLayout $ Behavior (0) | 2020.07.07 |
Python TypeError : 형식 문자열에 대한 인수가 충분하지 않습니다. (0) | 2020.07.07 |
기능이 너무 긴 경우는 언제입니까? (0) | 2020.07.07 |