今天使用iframe框架，遇到了嵌套頁面內容不全屏，頁面上下左右有空白，出現雙滾動條等情況，通過網上查閱，最終解決，在此做個記錄。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />-->
<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"> html{ /* 解決頁面會出現雙滾動條問題。overflow: hidden; 溢出隱藏，給一個元素中設置overflow: hidden，那么該元素的內容若超出了給定的寬度和高度屬性，那么超出的部分將會被隱藏，不占位。 */ overflow: hidden;
} body{ /* 解決頁面上下左右會出現空白問題。讓外框的外邊距和內邊距都為0 */ margin: 0; padding: 0;
} #iframepage{ width: 100%;
}
</style>
</head>
<body>
<iframe src="嵌入頁面的鏈接" id="iframepage" scrolling="auto" onload="changeFrameHeight()" frameborder="0"></iframe>
<!-- 以下JS部分是讓iframe自適應高度，兼容多種瀏覽器 -->
<script type="text/javascript">
function changeFrameHeight(){ var ifm= document.getElementById("iframepage"); ifm.height=document.documentElement.clientHeight; } window.onresize=function(){ changeFrameHeight(); } </script>
</body>
</html>
參考文章：