布局如下:
浅蓝色部分是部分页面才有的.
1.没有浅蓝色部分的页面:middle div的高度会随其内部的内容变化而变化,此时,需要将main、left、right的高度调整成一致且和Middle
2.有浅蓝色部分的页面:Middle中分m_left,m_right两个DIV,其中m_left中有一个iframe,在此需要实现iframe高度自适应且所有的DIV高度自动调整成一致。现在的情况:
对于第一种情况,我用了如下JS:function SetCwinHeight()
{
var mainCol = window.document.getElementById('main');
var leftCol = window.document.getElementById('left');
var rightCol = window.document.getElementById('right');
var middleCol = window.document.getElementById('middle'); var theHeight = middleCol.clientHeight;
if(theHeight >= 800)
{
mainCol.style.height = theHeight + 'px';
leftCol.style.height = theHeight + 'px';
rightCol.style.height = theHeight + 'px';
}
else
{
mainCol.style.height = '800px';
leftCol.style.height = '800px';
rightCol.style.height = '800px';
}
}但没效果,DIV高度还是不一致对于第二种情况,当iframe的内容多的时候,我用JS实现了所有DIV高度自动增加,但当iframe高度减少时,DIV的高度却不同步减少。我的JS如下:
function autoHeight()
{
var iframeid=document.getElementById("iframe"); //iframe id
if (document.getElementById)
{
if (iframeid && !window.opera)
{
if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight)
{
iframeid.height = iframeid.contentDocument.body.offsetHeight + "px";
document.getElementById("m_left").style.height=document.getElementById("iframe").offsetHeight + "px";
document.getElementById("main").style.height=document.getElementById("iframe").offsetHeight + "px";
document.getElementById("m_right").style.height=document.getElementById("main").offsetHeight + "px";
document.getElementById("left").style.height=document.getElementById("m_right").offsetHeight + "px";
document.getElementById("right").style.height=document.getElementById("left").offsetHeight + "px";
}
else if(iframeid.Document && iframeid.Document.body.scrollHeight)
{
iframeid.height = iframeid.Document.body.scrollHeight + "px";
document.getElementById("m_left").style.height=document.getElementById("iframe").offsetHeight + "px";
document.getElementById("main").style.height=document.getElementById("iframe").offsetHeight + "px";
document.getElementById("m_right").style.height=document.getElementById("main").offsetHeight + "px";
document.getElementById("left").style.height=document.getElementById("m_right").offsetHeight + "px";
document.getElementById("right").style.height=document.getElementById("left").offsetHeight + "px";
}
}
}
}
浅蓝色部分是部分页面才有的.
1.没有浅蓝色部分的页面:middle div的高度会随其内部的内容变化而变化,此时,需要将main、left、right的高度调整成一致且和Middle
2.有浅蓝色部分的页面:Middle中分m_left,m_right两个DIV,其中m_left中有一个iframe,在此需要实现iframe高度自适应且所有的DIV高度自动调整成一致。现在的情况:
对于第一种情况,我用了如下JS:function SetCwinHeight()
{
var mainCol = window.document.getElementById('main');
var leftCol = window.document.getElementById('left');
var rightCol = window.document.getElementById('right');
var middleCol = window.document.getElementById('middle'); var theHeight = middleCol.clientHeight;
if(theHeight >= 800)
{
mainCol.style.height = theHeight + 'px';
leftCol.style.height = theHeight + 'px';
rightCol.style.height = theHeight + 'px';
}
else
{
mainCol.style.height = '800px';
leftCol.style.height = '800px';
rightCol.style.height = '800px';
}
}但没效果,DIV高度还是不一致对于第二种情况,当iframe的内容多的时候,我用JS实现了所有DIV高度自动增加,但当iframe高度减少时,DIV的高度却不同步减少。我的JS如下:
function autoHeight()
{
var iframeid=document.getElementById("iframe"); //iframe id
if (document.getElementById)
{
if (iframeid && !window.opera)
{
if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight)
{
iframeid.height = iframeid.contentDocument.body.offsetHeight + "px";
document.getElementById("m_left").style.height=document.getElementById("iframe").offsetHeight + "px";
document.getElementById("main").style.height=document.getElementById("iframe").offsetHeight + "px";
document.getElementById("m_right").style.height=document.getElementById("main").offsetHeight + "px";
document.getElementById("left").style.height=document.getElementById("m_right").offsetHeight + "px";
document.getElementById("right").style.height=document.getElementById("left").offsetHeight + "px";
}
else if(iframeid.Document && iframeid.Document.body.scrollHeight)
{
iframeid.height = iframeid.Document.body.scrollHeight + "px";
document.getElementById("m_left").style.height=document.getElementById("iframe").offsetHeight + "px";
document.getElementById("main").style.height=document.getElementById("iframe").offsetHeight + "px";
document.getElementById("m_right").style.height=document.getElementById("main").offsetHeight + "px";
document.getElementById("left").style.height=document.getElementById("m_right").offsetHeight + "px";
document.getElementById("right").style.height=document.getElementById("left").offsetHeight + "px";
}
}
}
}
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货