การทำ iframe ให้ขนาดความสูง 100% เมื่ออ้างถึงลิงค์ข้ามโดเมน (cross domain)

อาจจะมีหลายคนที่มีปัญหาเกี่ยวกับ iframe เหมือนกันกับผม คือ ไม่ยอมสูงเท่าที่เราต้องการ เวลาอ้างไปหาโดเมนอื่น ประมาณว่าเราก็อยากให้มันสูงเต็มหน้าอ่ะนะ แต่เจ้ากับดันสูงประมาณ 200px นี่แหละ เสียเวลาแก้ตั้งนานไปเจอวิธีแก้เข้าก็เลยเอามาเก็บไว้ซะเลย 😀

<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">
html, body {
   height: 100%
}
body {
 margin: 0;
 overflow: hidden;
}
#topbar {
 height: 50px;
 width: 100%;
 border-bottom: 1px solid #666
}
#iframe {
 height: 100%;
 width: 100%;
 border-width: 0
}
</style>
</head>
<body>
<div id="topbar">
 <h1>My example top bar.</h1>
</div>
<iframe id="iframe" src="http://www.google.com/"></iframe>
</body>
</html>

แหล่งข้อมูลครับ : stackoverflow.com