问题前言
一般情况下我们很少用到iframe（框架），但有些特殊的情况下我们不得不使用iframe
今天就使用到了iframe框架，不出所料遇到了嵌套页面内容不全屏，页面上下左右有空白，出现双滚动条等情况，通过网上查阅，最终解决，在此做个记录
解决页面上下左右有空白，去除双滚动条，完美的、真正的让iframe自适应高度了，并且兼容多种浏览器。
解决方案
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style type="text/css">
/* 解决页面会出现双滚动条问题。overflow:hidden; 溢出隐藏，给一个元素中设置overflow: hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。 */
html{overflow:hidden;}
/* 解决页面上下左右会出现空白问题。让外框的外边距和内边距都为0 */
body{margin: 0;padding: 0;}
#iframepage{width: 100%}
</style>
</head>
<body>
<iframe src="嵌入页面的链接" id="iframepage" scrolling="auto" onload="changeFrameHeight()" frameborder="0"></iframe>
<script type="text/javascript">
// 以下JS部分是让iframe自适应高度，兼容多种浏览器
function changeFrameHeight(){
var ifm= document.getElementById("iframepage");
ifm.height=document.documentElement.clientHeight;
}
window.onresize=function(){
changeFrameHeight();
}
</script>
</body>
</html>
使用说明
请根据自己实际情况做相应修改
