2008-09-15 4 views
19

iframe이 있습니다. 콘텐츠는 설정하는 너비보다 넓어서 iframe에 가로 스크롤 막대가 표시됩니다. iframe의 너비를 늘려서 스크롤 막대를 제거하고 싶지는 않습니다. 스크롤 속성을 "no"로 설정해 보았습니다. 그러나 스크롤 막대를 모두 없애고 세로 막대를 필요로합니다. 오버플로 -x를 "숨김"으로 설정하려고 시도했지만 ff에서 수평 스크롤 막대가 삭제되었지만 IE에서는 삭제되지 않았습니다. 슬프다.IE에서 무시할 수있는 iframe 가로 스크롤 막대를 제거 할 수 없습니까?

답변

43
scrolling="yes" horizontalscrolling="no" verticalscrolling="yes" 

iFrame 태그에 넣으십시오.

CSS에서이 형식을 지정하려고 할 필요가 없습니다.

+1

zOMG. horizontalcrolling 및 verticalscrolling 속성이 MSDN에서 완전히 문서화되지 않은 것처럼 보인 반면 IE 6 문제를 해결하기 위해 노력했습니다. –

+1

위대한 솔루션, 정확히 내가 무엇을 찾고 있었는지, tyvm. – David

+0

iframe에 맞춤 HTML5 광고를 표시하는 IE10에 문제가 있습니다. 이 트릭을하는 것은 우리에게 효과가 없었습니다 ... – lkartono

5

iframe을 div 안에 넣은 다음 div를 사용하여 스크롤 할 수 있습니다. 문제없이 IE에서 div의 스크롤을 제어 할 수 있습니다. IE는 실제로 iframe 스크롤에 문제가 있습니다. 트릭을 수행해야하는 빠른 예가 있습니다.

<html> 
    <head> 
     <title>iframe test</title> 

     <style>   
     #aTest { 
      width: 120px; 
      height: 50px; 
      padding: 0; 
      border: inset 1px #000; 
      overflow: auto; 
     } 

     #aTest iframe { 
      width: 100px; 
      height: 1000px; 
      border: none; 
     } 
     </style> 
    </head> 
    <body> 
     <div id="aTest"> 
      <iframe src="whatever.html" scrolling="no" frameborder="0"></iframe> 
     </div> 
    </body> 
</html> 
+0

이 솔루션을 이용해 주셔서 감사합니다. 유일한 문제는 iframe 내용의 고정 높이를 정의해야한다는 것입니다.이 경우에는 다양한 경우가 있습니다. 나는 이것을 사용할 것이고, 다소 고질적 인 iframe을위한 추가 높이를 지정해야 할 것이다. 하지만 고마워.이게 날 잡았어. – mrjrdnthms

24

스크롤 바는 <iframe>의 속성이 아닙니다, 그것은 포함 된 페이지의 속성입니다. 내부 페이지의 <html> 요소에 overflow-x: hidden을 넣으십시오.

+1

body 요소로 작업했습니다. 감사! –

+2

이 솔루션은 iframe 코드 라이트를 유지하고 캡슐화를 선호하는만큼 훨씬 낫습니다. 구문을 추가하고 기억할 필요가 없습니다. –

+3

@DannyG에 동의합니다. 우리는 마크 업에서 프리젠 테이션 속성의 시대를 넘어 섰습니다. 순수 CSS 솔루션은 여러 가지 이유로 바람직합니다. – DuxPrime

0
<iframe style="overflow:hidden;" src="about:blank"/> 

은 IE에서 작동해야합니다. IE6에는 overflow-x 및 overflow-y를 지원하는 문제가있었습니다.

주목할 점은 iframe의 IE 테두리는 camelCase에서 "frameborder"특성을 설정 한 경우에만 제거 할 수 있다는 것입니다.

<iframe frameBorder="0" style="overflow:hidden;" src="about:blank"/> 

CSS로 올바르게 스타일을 지정할 수 있으면 좋지만 IE에서는 작동하지 않습니다.

+0

제 경우에는 x 스크롤 막대를 제거하고 싶지만 y는 그렇지 않습니다. 숨겨진 오버플로를 설정하면 둘 다 제거됩니다. 그게 맞습니까? – mrjrdnthms

0

이러한 솔루션은 모두 나를 위해 작동하지 않았거나 만족스럽지 않았습니다. 스크롤 가능한 DIV를 사용하면 가로 스크롤 막대를 멀리 만들 수 있지만 항상 세로 막대가 있습니다.

그래서 모든 iframe의 고정 높이를 제어 할 수있는 사이트에서 다음 솔루션이 잘 작동합니다. 그것은 단순히 DIV :

<!-- This DIV is a special hack to hide the horizontal scrollbar in IE iframes --> 
<!--[if IE]> 
<div id="ieIframeHorScrollbarHider" style="position:absolute; width: 768px; height: 20px; top: 850px; left: 376px; background-color: black; display: none;"> 
</div> 
<![endif]--> 
<script type="text/javascript"> 
    if (document.getElementById("idOfIframe") != null && document.getElementById("ieIframeHorScrollbarHider") != null) 
    { 
    document.getElementById("ieIframeHorScrollbarHider").style.display = "block"; 
    } 
</script> 
0

또한 99 %에 iframe을 내부에 포함 된 사항 페이지 본문의 너비를 설정 시도 할 수 있습니다 가로 스크롤 막대를 숨 깁니다.

관련 문제