笔记：DIV高度自适应

最新推荐文章于 2023-12-09 17:16:19 发布

蘑菇_1

最新推荐文章于 2023-12-09 17:16:19 发布

阅读量837

点赞数 1

分类专栏： html/js/css/ajax/jeuqry

本文链接：https://blog.csdn.net/tongge01uuu/article/details/10117509

版权

html/js/css/ajax/jeuqry 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

今天遇到一个DIV高度自适应的问题，始终无法解决。用了无数方法...真是HTML底子薄啊。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
    #aa{ border:#000000 solid 5px;overflow:hidden;} 
    #bb{border:#00ffff solid 5px;float:left; padding-bottom:100000px;margin-bottom:-100000px; }
    #cc{ border:#0033CC solid 5px;float:left;padding-bottom:100000px;margin-bottom:-100000px;}
    #dd{float:left}
</style>
<div id="aa">
    <div id="bb">子div</div>
    <div id="cc">子div</div>
   <div id="dd">子div<br /><br /><br /><br /> <br /> </div>
</div>

padding-bottom:100000px;的目的就是让该盒模型高度增加100000px，margin-bottom:-100000px; 再让显示在外边的边距减少10000px，以抵消padding-bottom:100000px;。

但这样外面会显示出高99995px的框，所以最外面又加上了overflow:hidden;

这一段代码虽然不合适，但是想法很好，所以记下来。

function reinitIframe(){  
   // var iframeWin = window.frames['Main'];
    var iframeWin=window.parent.frames["center"];
var iframeEl = window.parent.document.getElementById? window.parent.document.getElementById('center'): document.all? document.all['center']: null; 
if ( iframeEl && iframeWin ){ 
var docHei = getDocHeight(iframeWin.document); 
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px'; 
} 
else if(iframeEl){ 
var docHei = getDocHeight(iframeEl.contentDocument); 
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px'; 
} 

function getDocHeight(doc){ 
var docHei = 0; 
var scrollHei;//scrollHeight 
var offsetHei;//offsetHeight，包含了边框的高度 
if (doc.height){ 
//Firefox支持此属性，IE不支持 
docHei = doc.height; 
}else if (doc.body){ 
if(doc.body.offsetHeight) docHei = offsetHei = doc.body.offsetHeight; 
if(doc.body.scrollHeight) docHei = scrollHei = doc.body.scrollHeight; 
} 
else if(doc.documentElement){ 
if(doc.documentElement.offsetHeight) docHei = offsetHei = doc.documentElement.offsetHeight; 
if(doc.documentElement.scrollHeight) docHei = scrollHei = doc.documentElement.scrollHeight; 
} 
/* 
docHei = Math.max(scrollHei,offsetHei);//取最大的值，某些情况下可能与实际页面高度不符！ 
*/ 
return docHei; 
} 

其中 center是一个iframe的id,这个方法由该iframe之中的某个地方调用

这段代码是领导写的，但是不适应这里，根据这里的高度改了N次，时钟无法显示DIV下面一大块，CSS样式删了又改还是不行。

坐等领导写出来，再上传

蘑菇_1

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
笔记：DIV高度自适应

今天遇到一个DIV高度自适应的问题，始终无法解决。用了无数方法...真是HTML底子薄啊。 #aa{ border:#000000 solid 5px;overflow:hidden;} #bb{border:#00ffff solid 5px;float:left; padding-bottom:100000px;margin-bottom:-100000px; }
复制链接

扫一扫