简体   繁体   English

如何将高度为100%的iframe与页面滚动条集成在一起

[英]How to integrate iframe with 100% height and with page scrollbars

I want to insert a iframe in to a webpage with following requirements: 我想将iframe插入具有以下要求的网页:

  1. iframe height must be 100% - it should stretch the height with its content. iframe的高度必须为100%-应该使用其内容拉伸高度。
  2. iframe scrollbars should not be visible, but the page scrollbars should be there with relevant to the height of the iframe contents. iframe滚动条应该是不可见的,但是页面滚动条应该在那里,并且与iframe内容的高度有关。
  3. iframe source is from a different domain. iframe来源来自其他域。

Once the iframe is integrated, the web page should be as a single normal web page. 集成iframe后,该网页应作为单个普通网页。 I have styled the page and the iframe source page to match each other. 我已将页面和iframe源页面的样式设置为彼此匹配。

I tried different solutions by searching, but so far no luck. 我通过搜索尝试了不同的解决方案,但到目前为止还没有运气。

Please give me a help 请给我一个帮助

Thank You 谢谢

use css as 使用CSS作为

iframe{
height: 250px; // whatever you want
}

Link DEMO 链接演示

try this code... 试试这个代码...

<!DOCTYPE html>
<html>
<head>
<title>iframed site</title>
<style>
.restricted{
    width:100%; 
    height:100%; 

    overflow-x: hidden;

    -ms-overflow-x: hidden; 


}
</style>
</head>

<body>
<iframe src="http://www.mukhesh-blog.blogspot.com" class="restricted"></iframe>
</body>
</html>

or this.... 或这个....

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
 <head>
  <title>iframe example</title>
  <style type="text/css">
   html, body, div, iframe { margin:0; padding:0; height:100%; }
   iframe { display:block; width:100%; border:none; }
  </style>
 </head>
 <body>
  <div>
   <iframe src="http://example.org/">
    <p><a href="http://example.org/">example.org</a></p>
   </iframe>
  </div>
 </body>
</html>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM