>  기사  >  웹 프론트엔드  >  CSS Div 요소에 가로 스크롤 막대만 표시하는 방법은 무엇입니까?

CSS Div 요소에 가로 스크롤 막대만 표시하는 방법은 무엇입니까?

Linda Hamilton
Linda Hamilton원래의
2024-11-09 15:33:02920검색

How to Display Only Horizontal Scroll Bars in a CSS Div Element?

CSS Div 요소에만 가로 스크롤 막대를 표시하는 방법

다음 CSS 스타일을 가진 div 컨테이너가 있습니다.

div#tbl-container 
{
    width: 600px;   
    overflow: auto;    
    scrollbar-base-color:#ffeaff
}

이 스타일은 div 내에 포함된 테이블을 채울 때 가로 및 세로 스크롤 막대를 자동으로 표시합니다. 그러나 가로 스크롤 막대만 자동으로 나타나도록 하고 테이블 높이를 프로그래밍 방식으로 수정하도록 합니다.

예상되는 동작은 콘텐츠가 필요할 만큼 충분히 클 때만 가로 스크롤 막대를 갖는 것입니다. 그러나 이 문제는 주로 Internet Explorer(IE)에서 버그로 인해 발생합니다. Firefox와 같은 다른 브라우저에서 확인하면 문제를 격리하는 데 도움이 됩니다.

IE6-7부터는 제안된 CSS3 확장을 사용하여 스크롤 막대를 독립적으로 설정할 수 있습니다.

overflow: auto;
overflow-y: hidden;

IE8 호환성의 경우 , 다음을 추가해야 할 수도 있습니다.

-ms-overflow-y: hidden;

Microsoft는 IE8 표준 모드에서 CR 표준 이전 속성을 자체 '-ms' 상자로 분리합니다.

궁극적으로 IE8에서는 문제가 해결되었을 수 있습니다. 이 버그가 있지만 이러한 속성을 사용하면 IE6-7 이하에 대한 해결 방법이 제공됩니다.

위 내용은 CSS Div 요소에 가로 스크롤 막대만 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.