>웹 프론트엔드 >HTML 튜토리얼 >div의 iframe 높이 적응 문제

div의 iframe 높이 적응 문제

WBOY
WBOY원래의
2016-09-05 08:45:361477검색

웹페이지는 위쪽, 중간, 아래쪽 세 부분으로 나누어져 있습니다. 위쪽과 아래쪽 높이는 고정되어 있으며 가운데 부분은 왼쪽과 오른쪽 부분으로 나뉩니다. 고정되어 있고 올바른 너비가 조정됩니다. 이제 오른쪽 div의 너비와 높이가 조정됩니다. 오른쪽 div에 IFrame이 외부 div의 너비와 높이에 맞춰지도록 하시겠습니까?

직접 만들면서 발생한 문제는 ifame의 너비와 높이를 100%로 설정하면 iframe이 div에서 밀려나와 div 아래쪽으로 미끄러지는 현상이었습니다. 그러다가 인터넷으로 이것저것 해보았지만 해결이 안되다가 그런 상황이 발생하지 않도록 뭔가를 추가했습니다

다음은 내 div의 js 설정입니다

<span style="color: #008000;">//</span><span style="color: #008000;">window.onresize表示窗口触发时间的时候执行</span><span style="color: #008000;">
//</span><span style="color: #008000;">两个函数,用闭包包裹起来()()</span>
window.onload=<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
    (window.onresize</span>=<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
    </span><span style="color: #008000;">//</span><span style="color: #008000;">获取可见宽度</span>
    <span style="color: #0000ff;">var</span> width=document.documentElement.clientWidth-180<span style="color: #000000;">;//180为左边的div的大小
    </span><span style="color: #008000;">//</span><span style="color: #008000;">获取可见高度</span>
    <span style="color: #0000ff;">var</span> height=document.documentElement.clientHeight-80<span style="color: #000000;">;//80为头部的div的大小可自己修改
    
    </span><span style="color: #008000;">//</span><span style="color: #008000;">如果有宽度就给值,</span>
    <span style="color: #0000ff;">if</span>(width>=0<span style="color: #000000;">){
        document.getElementById(</span>'main').style.width=width+'px'<span style="color: #000000;">;
        
    }
    </span><span style="color: #0000ff;">if</span>(height>=0<span style="color: #000000;">){
        document.getElementById(</span>'sidebar').style.height=height+'px'<span style="color: #000000;">;
        document.getElementById(</span>'main').style.height=height+'px'<span style="color: #000000;">;
    }
})()};</span>

이것이 CSS입니다

<span style="color: #800000;">html</span>{<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;
    <span style="color: #008000;">/*</span><span style="color: #008000;">火狐则会去除改变窗口大小时出现的白条这个bug</span><span style="color: #008000;">*/</span>
}

참고만 하시고, 싫으시면 뿌리지 마세요.

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