head裡面填入

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">

function SetCwinHeight() {
var bobo = document.getElementById("ilona"); //iframe id
  if (document.getElementById) {
    if (bobo.contentDocument && bobo.contentDocument.body.offsetHeight) {
      bobo.height = bobo.contentDocument.body.offsetHeight;
    }
    else if (bobo.Document && bobo.Document.body.scrollHeight) {
      bobo.height = bobo.Document.body.scrollHeight;
    }
  }
}

$(window).load(function() {
var explore = navigator.userAgent.toLowerCase();
//alert(explore);

if (explore.match("msie 8.0") != null) {//判斷瀏覽器指定高度

$('iframe#ilona').contents().height(2000px);
}

});

 

body裡面要嵌入的iframe

<iframe name="ilona" id="ilona" src="features.html" width="100%"
height="auto" marginwidth="100%" marginheight="100%" border="0"
frameborder="no" scrolling="no" onload="Javascript:SetCwinHeight()"></iframe>

 

[解釋]
當iframe被onload完畢後 會呼叫SetCwinHeight()方法
接著SetCwinHeight()方法會去抓iframe#ilona的物件
再去抓對應的高度丟到整個iframe裡面 讓他跑出對應的高度出來

[注意]
若iframe裡面div有用float排版的物件
會讓iframe的高度抓不到
(解法參考: http://it.nekounya.com/css-float-height-correct.html#comment-570)

解法:
div.content 裡面有兩個block
一個靠右(float:right;)一個靠左(float:left;)

這裡左右的兩個block
都要設定寬度之外,還要height:auto;
然後最外層的content要加上overflow:hidden;



 

cabuchi 發表在 痞客邦 PIXNET 留言(0) 人氣()