谷歌浏览器下如果使用iframe 子页面的高度问题

lippo3170137 2014-04-21 09:41:25

大致就像这两个页面

父页面：

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>父页面</title>

</head>



<body>

<div style="width:100%;height:300px; background-color:#999;">头部</div>

<div style="width:100%;"><iframe src="子页面.html" scrolling="no" width="100%" height="100%"></iframe></div>

<div style="width:100%;height:300px; background-color:#069;">底部</div>

</body>

</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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>子页面</title>

</head>



<body>

<div style="width:100%; height:1200px; background-color:#03C;"></div>

</body>

</html>

要让子页面的内容全部显示在父页面内。
怎么解决？求助！！

...全文

350 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

DT27 2014-04-24

打赏
举报

子页面加入JS获取本身高度后将父页面对应iframe元素高度改为本页面高度。

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>子页面</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
 
<body>
<div style="width:100%; height:1200px; background-color:#03C;"></div>
<script type="text/javascript">
$(function(){
	var selfHeight = document.body.scrollHeight;
    var p_demo = window.top.document.getElementById('ifrMain');
    p_demo.height=selfHeight;
})
</script>
</body>
</html>