讓iframe自動調整高度
<style type="text/css">
#video-wrapper{
position: relative;
padding-bottom: 56.25%; //16:9
overflow: hidden;
}
#video-wrapper iframe{
position: absolute;
top: 10px;
left: 5%;
bottom:5px;
width: 90%;
height: 90%;
}</style>
<div id="video-wrapper" style="text-align:center;">
<iframe frameborder="0" scrolling="no" src="#" style="border:none;overflow:hidden;"></iframe></div>
~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~ #video-wrapper{
position: relative;
padding-bottom: 56.25%; //16:9
overflow: hidden;
}
#video-wrapper iframe{
position: absolute;
top: 10px;
left: 5%;
bottom:5px;
width: 90%;
height: 90%;
}</style>
<div id="video-wrapper" style="text-align:center;">
<iframe frameborder="0" scrolling="no" src="#" style="border:none;overflow:hidden;"></iframe></div>
-------------------------------------------------------------------------------------------------------------------------------------------------
找了好幾個方法，就以這個方法簡單又有效~~
首先，加入iframe的語法。
<iframe src="./source"(欲連結的網頁) name="mainframe" width="98%" marginwidth="0" marginheight="0" scrolling="No" frameborder="0" id="mainframe" margin-left="20" ></iframe>
在到欲連結的網頁裡，在head下面加入以下程式碼。
<head> <script> function resize(){ parent.document.getElementById("mainframe").height=document.body.scrollHeight; } </script> </head>
並在body裡加入:
<body onload="resize();" >
這樣就可以嚕~~
還有另一個方法也不錯。只要在同一個檔案內編寫就好。在有iframe的頁面的head之下加入以下程式碼。
<script type="text/javascript"> function SetCwinHeight(){ var iframeid=document.getElementById("iframeid"); //iframe id if (document.getElementById){ if (iframeid && !window.opera){ if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){ iframeid.height = iframeid.contentDocument.body.offsetHeight; }else if(iframeid.Document && iframeid.Document.body.scrollHeight){ iframeid.height = iframeid.Document.body.scrollHeight; } } } } </script>
iframe內加入onload="Javascript:SetCwinHeight()"
<iframe src="./NEWS" name="mainframe" width="98%" height="300" marginwidth="0" marginheight="0" onload="Javascript:SetCwinHeight()" scrolling="No" frameborder="0" id="mainframe" margin-left="20" ></iframe>
因為我的iframe是包在contentRight裏，若contentRight的高度設為自動，則contentRight一開始的高度會很小，所以將contentRight 設一個 min-height:700px 就可以嚕。
響應式網頁架站只要6,888元起|[RWD]響應式網站，自適應網頁，讓SEO搜尋引擎最佳化你的網站
"你是獵人還是獵物？"
0 comments :
張貼留言
1.猛甲茶道，歡迎多留言，可以幫自己網站打廣告~
2.需要 猛甲茶道 回覆，請勿使用匿名留言[可使用名稱/網址，名稱填自己名字，若無網址，請填E-mail]。
3.匿名攻訐、不相干之廣告適用於無條件刪去法，望請海涵:)
4.您可以使用一些 HTML 標記，如：
<b>粗體</b>, <i>斜體</i>, <a href='網址'>描述文字</a>