iframe scroll 깔끔하게 처리하기.

--A.html

 

<iframe src="B.html" .... width="800" heignt="300" scrolling = "no"></iframe>

 

--B.html

<div id="bdiv" style="width=800;height=xxx;overflow:auto;overflow-x;">

<table width="100%">

...

...

</table>

 

</div>

 

 

xxx 값을 적당히 나올 정도로 A.html의 iframe height 값 보다 적게 조절 하면서 주면 됨.

 

이렇게 해주면

 

iframe 을 호출하면 서 자동으로 scroll이 생겨서 깔끔하게 처리 되지 않을 경우가 많은데

 

호출 부에서는 iframe scrolling="no"로 해주고

 

B.html에서 div로 scroll 제어를 해주면 보다 깔끔한 스크롤 처리가 가능해짐.

 

iframe을 호출되어지는 페이지에 따라 resize 하는 것을 해보았으나

 

내가 원하는 것은 호출 되어지는 사이즈는 그대로 iframe 사이즈 역시 고정 시킨 상태에서

 

세로 스크롤만 딱 B.html의 내용 만큼 생기게 하는 것이었는데 이렇게 하면 깔끔.

 

더 깔끔하게 하려면

 

 

--A.html

 

<iframe src="B.html" .... width="800" heignt="300" scrolling = "no"></iframe>

 

--B.html

 

<table> <!-- 껍데기 테이블>

<div ........>

<table width="100%"> <!-- 제목이 들어갈 부분이나 게시판의 header 부분 -->

........

</table>

</div>

 

<div id="bdiv" style="width=800;height=xxx;overflow:auto;overflow-x:no;">

<table width="100%"> <!-- 내용이나 목록이 들어갈 부분 -->

...

...

</table>

</div>

 

</table>

 

 

B.html에서 전체 table로 감싸고 내부에

 

header 부분 table과 contents 부분 table로 처리 하는 것.

 

 

추가 사항

table width="100%" 를 안해주고 임의로 div와 똑같은 width 사이즈를 주면

div에 overflow-x:no를 하였다 하더라도 가로 스크롤 바가 생김.

[출처] [HTML]iframe scroll 깔끔하게 처리하기.|작성자 고민만