페이지를 만들어서 아이프레임 기능으로 링크를 넣었습니다. 폭과 높이를 100% 로 입력했는데요 높이가 100px 정도만 나오고 짤리네요..
높이를 100% 할려면 어떻게 해야 할까요?
세진님의
http://sejin7940.co.kr/xe_tips/21384
을 참고해보았는데요. 외부페이지로 연결해보면 잘됩니다. 그런데 페이지에서 생성하고 아이프레임으로 블러오기를 하면 안되네요
감사합니다.
| PHP | PHP 7.4 |
|---|---|
| CMS | Rhymix 2.1 |
-
-
?
네 감사합니다. 구글링해서 해봐도 안되더라고요. 폭 100%는 적용이 되는데 높이를 100%로 하면 100px 정도로만 나옵니다.
-
<iframe id="iframe01" src="example.html">
아이프레임 부분 id를 지정
<script> $(function(){ var window_height = $(window).height(); $('#iframe01').css('height', window_height); }); </script>위의 Jquery 조작부 소스를 페이지 최 하단 혹은 적절한 위치에 삽입
추가 설명 :
#iframe01 은 id값이 iframe01인 요소를 의미.
이 방법은 Jquery를 이용한 방법이고.. 그 밖에 다른 방법또한 YJSoft 님 의견처럼 많습니다.
-
?
네 감사합니다. 페이지 생성해서
<iframe id="iframe01" src="사이트링크">
<script>
$(function(){
var window_height = $(window).height();
$('#iframe01').css('height', window_height);
});
</script>
이렇게 넣어봤는데 제가 먼가 잘못한거 같다는 생각이 듭니다. -
?
위의 소스는 제이
엔지쿼리 를 필요로 합니다.XE 및 라이믹스에는 jquery가 내장되어 있어 jquery문법으로 설명 드린건데... 별도의 페이지라면 jquery를 로드 해주어야 정상 작동 합니다.
페이지의 상단에
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
추가 해주시면 정상 작동 될것이라 생각합니다.
혹은 jquery를 사용하지 않는 순수 자바스크립트 방법을 찾아서 적용하시면 jquery없이도 구현 가능합니다
검색어 : javascript iframe height 100%
-
?
<script src="https://code.jquery.com/jquery-latest.min.js"></script> <body style="margin: 0px;"> <iframe id="iframe01" style="width:100%; border:0px;" src="https://realpano.net/_vr/230424/tour.html?startscene=0&startactions=lookat(-160.19,18.49,124.58,0,0)"></iframe> </body> <script> $(function(){ var window_height = $(document).innerHeight(); // 현재 페이지의 높이를 가져와서 window_height 변수에 저장 $('#iframe01').css('height', window_height); // id가 iframe01인 요소의 높이를 window_height 변수로 변경 }); </script>쪽지에는 코드하이라이트 및 첨부파일 기능이 없어 여기에 남깁니다.
다만, 가이더 님께서 어떤 페이지에 아이프레임을 넣느냐에 따라 필요로 하는 높이값 등은 변동될 수 있기 때문에
헤더 메뉴나 다른 요소들이 존재 한다면 그 부분의 높이는 빼주셔야 정상적으로 나올것 입니다.
또한 페이지의 크기가 변동되는 경우에 아이프레임 크기가 고정되어 있을 것이기에..
자동으로 위의 코드가 적용 되도록 위 코드를 함수화 하여 페이지 리사이즈시 해당 함수가 작동 되도록 수정 하셔야 할 것입니다.
-
?
오옷 잘됩니다. 정말 감사드립니다. ( _ _ )
-
해당 페이지에 <iframe> 태그만 있고, 화면에 완전히 꽉차야 한다면
width: 100%; height: 100vh;
으로도 됩니다.
그게 아니라, 부모 요소에 100% 꽉 차야한다면 CSS로는 어렵고 다른 분이 말씀하신 것처럼 자바스크립트로 제어해야 합니다. -
?
네 감사드립니다. 제가 코드엔 젬병이라 단순하게 페이지에 소스만 넣어서 처리한거 같습니다.
그리고 누누히 말씀드리지만 안된다고만 적으시면 아무도 뭐가 문제인지 모릅니다. 아이프레임이 뜨지 않는건가요? 뜨긴 뜨는데 높이가 안맞나요? 콘텐츠 부분을 채우는게 목표인데 넘치게 채워지나요? 적지 않으시면 알 수 없습니다.