CSS를 사용하여 div를 세로로 스크롤 가능하게 만들기 니펫 확장 주는 div사용자가 수평 및 수직 양쪽에서

이

<div id="" style="overflow:scroll; height:400px;">

스 니펫 확장

주는 div사용자가 수평 및 수직 양쪽에서 스크롤 할 수있다. div가 세로 로만 스크롤 가능 하도록 변경하려면 어떻게합니까 ?

답변

잘못된 속성을 사용하지 않는 것이 좋습니다. 스크롤 바는 어떤 속성을 트리거 할 수 있습니다 overflow, overflow-x또는 overflow-y및 각각의 설정 될 수있다 visible, hidden, scroll, auto, 또는 inherit. 현재이 두 가지를보고 있습니다.

  • auto-이 값은 상자의 너비와 높이를 보여줍니다. 그것들이 정의되면, 상자가 그 경계를 넘어 확장되지 못하게합니다. 대신 (컨텐츠가 해당 경계를 초과하는 경우) 길이를 초과하는 경계 (또는 둘 다)에 대한 스크롤 막대를 만듭니다.

  • scroll-이 값 은 내용이 경계 설정을 초과하지 않더라도 스크롤 막대를 강제로 실행 합니다. 내용을 스크롤 할 필요가 없으면 막대가 “비활성화 됨”또는 비대화 형으로 나타납니다.

당신이 경우 항상 원하는 세로 스크롤 막대가 표시합니다 :

을 사용해야합니다 overflow-y: scroll. 이 힘은 스크롤바가 필요 여부를 수직 축에 표시합니다. 실제로 컨텍스트를 스크롤 할 수 없으면 “비활성화”스크롤 막대로 나타납니다.

상자를 스크롤 할 수있는 경우 스크롤 막대 만 표시하려는 경우 :

그냥 사용하십시오 overflow: auto. 기본적으로 내용은 현재 줄에 맞지 않을 때 다음 줄로 넘어 가기 때문에 가로 스크롤 막대가 만들어지지 않습니다 (단, 줄 바꿈이 비활성화 된 요소에 있지 않은 경우). 세로 막대의 경우 내용을 지정한 높이까지 확장 할 수 있습니다. 높이를 초과하면 나머지 내용을 볼 수있는 세로 스크롤 막대가 표시되지만 높이를 초과하지 않으면 스크롤 막대가 표시되지 않습니다.

답변

이렇게 해보십시오.

<div style="overflow-y: scroll; height:400px;">

스 니펫 확장

답변

뷰포트 높이가 100 % 인 경우 :

overflow: auto;
max-height: 100vh;

답변

overflow-y: auto;div에서 사용하십시오 .

또한 너비도 설정해야합니다.

답변

대신이 코드를 사용할 수 있습니다.

<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">

overflow-x : overflow-x 속성은 내용의 왼쪽 / 오른쪽 가장자리로 수행 할 작업을 지정합니다 (요소의 내용 영역이 오버플로 된 경우).
overflow-y : overflow-y 속성은 요소의 내용 영역에 넘칠 경우 내용의 위쪽 / 아래쪽 가장자리로 수행 할 작업을 지정합니다. 보이는

값 : 기본값. 내용이 잘리지 않고 내용 상자 외부에서 렌더링 될 수 있습니다. hidden : 내용이 잘리고 스크롤 메커니즘이 제공되지 않습니다. scroll : 내용이 잘리고 스크롤 메커니즘이 제공됩니다. auto : 넘침 상자에 스크롤 메커니즘이 제공되어야합니다. 초기




:이 속성을 기본값으로 설정합니다.
inherit 이 요소를 부모 요소에서 상속합니다.

답변

overflow-y: scroll세로 스크롤에 사용할 수 있습니다 .

<div  style="overflow-y:scroll; height:400px; background:gray">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

 </div>

스 니펫 확장

답변

나를 위해이 모든 대답의 문제는 응답하지 않았다는 것입니다. 내가 원하지 않는 부모 div의 고정 높이를 가져야했습니다. 나는 또한 미디어 쿼리로 많은 시간을 보내고 싶지 않았습니다. 각도를 사용하는 경우 부트 스트랩 탭 세트를 사용할 수 있으며 모든 노력을 기울일 것입니다. 내부 내용을 스크롤 할 수 있으며 반응 형입니다. 탭을 설정할 때 다음과 같이하십시오 : $scope.tab = { title: '', url: '', theclass: '', ative: true };… 요점은 제목이나 이미지 아이콘을 원하지 않는 것입니다. 그런 다음 CSS에서 탭의 개요를 다음과 같이 숨 깁니다.

.nav-tabs {
   border-bottom:none;
}

또한 이것 .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;}
과 마지막으로 이것을 구현하지 않으면 여전히 클릭 할 수있는 보이지 않는 탭을 제거하십시오..nav > li > a {padding:0px;margin:0px;}