내용이 한계보다 작은 경우 사라지는 HTML에 스크롤 바를 추가하는 방법

Question

확장 가능한 위젯이있는 양식을 만들려고합니다. 문제는 위젯이 열리면 양식이 컨텐츠 상자의 한계를 벗어나고 나빠 보인다는 것입니다.

나는 사용을 시도했다 overflow:scroll 그러나 Conent가 콘텐츠 상자보다 작더라도 사라지지 않는 2 개의 추악한 스크롤 바를 만듭니다. 수직 스크롤 바만 있으면됩니다.

Visual Studio는 또한 CSS에서 오버플로 Y를 사용할 수 없다고 경고했습니다.

Answer 1

오버플로를 변경하십시오 auto 요소의 높이 및/또는 너비를 정의하십시오.

Answer 2

overflow-x 그리고 overflow-y CSS3 제안의 일부이며 Big Four 브라우저의 모든 버전에서 작동합니다.

나는 보통 :

overflow: auto;
overflow-x: auto;
overflow-y: auto;

그 이유는 때때로 브라우저가 치료하기 때문입니다 overflow: auto ~처럼 overflow: scroll (두 개의 못생긴 스크롤 바) 콘텐츠가 한 방향으로 오버플을 받 자마자 해당 브라우저는 이미 지원합니다. overflow-x 그리고 overflow-y, 우선 순위.

Answer 3

Swilliams는 증상을 치료하는 방법에 대한 좋은 답변을주었습니다. 그러나 근본 원인에 대해서도 생각하고 싶을 수도 있습니다. 콘텐츠 상자가 고정 크기로 제한되지 않으면 스크롤 막대없이 모든 크기 형태에 맞게 축소 및/또는 확장 될 수 있습니다. 웹 페이지는 디자인에 의해 유연하며, 유연성이 일반적으로 이런 종류의 문제에 빠지는 것을 "고정"하려고 시도합니다.