아이프레임(iframe) 높이(height:세로) 자동조절
요즘 아이프레임을 쓸 일이 별로 없지만 프로그래밍을 하다가 보면 꼭 필요한 때가 있죠.
간단한 예제 올려봅니다.
--------------------------------------
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>아이프레임(iframe) 높이(height:세로) 자동조절</title>
<style type="text/css">
*{margin: 0 auto;}
body {}
#my-iframe {display:block;border:none;height:100vh;width:100vw}
</style>
<head>
<body>
<iframe id="my-iframe" src="대상 url 기입" crolling="no" frameborder="none"></iframe>
</body>
</html>
--------------------------------------
뷰포트 (Viewport units: vw, vh, vmin, vmax) 단위 호환성은 아래 링크와 같습니다.
https://caniuse.com/#feat=viewport-units
--------------------------------------
댓글 18개
html 5에서 추가된 규격인가 봅니다.
무튼 감사합니다.
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4443 | ||
| 2694 | 2개월 전 | 206 | ||
| 2693 | 2개월 전 | 162 | ||
| 2692 | 2개월 전 | 170 | ||
| 2691 | 2개월 전 | 184 | ||
| 2690 | 2개월 전 | 336 | ||
| 2689 | 2개월 전 | 247 | ||
| 2688 |
 SIR개발팀 |
2개월 전 | 450 | |
| 2687 | 3개월 전 | 302 | ||
| 2686 |
선택과집중
|
3개월 전 | 340 | |
| 2685 | 3개월 전 | 302 | ||
| 2684 | 3개월 전 | 361 | ||
| 2683 | 3개월 전 | 493 | ||
| 2682 | 3개월 전 | 285 | ||
| 2681 | 3개월 전 | 312 | ||
| 2680 |
선택과집중
|
3개월 전 | 284 | |
| 2679 | 3개월 전 | 340 | ||
| 2678 |
 Xenon54 |
3개월 전 | 437 | |
| 2677 |
Xenon54 |
3개월 전 | 511 | |
| 2676 | 3개월 전 | 336 | ||
| 2675 | 3개월 전 | 314 | ||
| 2674 |
선택과집중
|
3개월 전 | 489 | |
| 2673 |
 ideaman |
3개월 전 | 330 | |
| 2672 | 3개월 전 | 347 | ||
| 2671 | 3개월 전 | 296 | ||
| 2670 | 3개월 전 | 269 | ||
| 2669 | 3개월 전 | 382 | ||
| 2668 | 3개월 전 | 297 | ||
| 2667 |
선택과집중
|
3개월 전 | 496 | |
| 2666 |
선택과집중
|
4개월 전 | 481 | |
| 2665 |
선택과집중
|
4개월 전 | 419 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기