내용이 한계보다 작은 경우 사라지는 HTML에 스크롤 바를 추가하는 방법
-
04-07-2019 - |
문제
확장 가능한 위젯이있는 양식을 만들려고합니다. 문제는 위젯이 열리면 양식이 컨텐츠 상자의 한계를 벗어나고 나빠 보인다는 것입니다.
나는 사용을 시도했다 overflow:scroll
그러나 Conent가 콘텐츠 상자보다 작더라도 사라지지 않는 2 개의 추악한 스크롤 바를 만듭니다. 수직 스크롤 바만 있으면됩니다.
Visual Studio는 또한 CSS에서 오버플로 Y를 사용할 수 없다고 경고했습니다.
해결책
오버플로를 변경하십시오 auto
요소의 높이 및/또는 너비를 정의하십시오.
다른 팁
overflow-x
그리고 overflow-y
CSS3 제안의 일부이며 Big Four 브라우저의 모든 버전에서 작동합니다.
나는 보통 :
overflow: auto;
overflow-x: auto;
overflow-y: auto;
그 이유는 때때로 브라우저가 치료하기 때문입니다 overflow: auto
~처럼 overflow: scroll
(두 개의 못생긴 스크롤 바) 콘텐츠가 한 방향으로 오버플을 받 자마자 해당 브라우저는 이미 지원합니다. overflow-x
그리고 overflow-y
, 우선 순위.
Swilliams는 증상을 치료하는 방법에 대한 좋은 답변을주었습니다. 그러나 근본 원인에 대해서도 생각하고 싶을 수도 있습니다. 콘텐츠 상자가 고정 크기로 제한되지 않으면 스크롤 막대없이 모든 크기 형태에 맞게 축소 및/또는 확장 될 수 있습니다. 웹 페이지는 디자인에 의해 유연하며, 유연성이 일반적으로 이런 종류의 문제에 빠지는 것을 "고정"하려고 시도합니다.
제휴하지 않습니다 StackOverflow