更新

Question

我想在此网页http://www.kitebom.com.au/上为地图创建响应式iframe。

Answer 1

它具有响应能力flexbox，顺便说一句，我在你发布的网站示例中没有看到任何iframes。 Iframes不适合胆小的人，我强烈建议不要这样做。该网站实际上使用[地图] [1]作为地图及其坐标，这比iframe更难做到。

CSS

    html { color: #000; font: 600 16px/1.45 Arial; }

    *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; border: 0; list-style: none; text-decoration: none; }

    body { width: 100vw; height: 100vh; }

    #flexMain { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; align-content: stretch; border: 2px solid blue; width: 100%; height: 100%; }

    #flexMap { display: inline-block; flex: 0 0 80%; width: 40em; height: 100%; background: yellow; }

    #flexNav { display: inline-block; flex: 0 0 20%; width: 10em; height: 100%; background: green; }

    .flexible * { text-align: center; border: 10px solid red; }

HTML

  <main id="flexMain" class="flexible">
    <nav id="flexNav" class="flexible">
      NAV
    </nav>
    <section id="flexMap" class="flexible">
      MAP
   </section>
 </main>

更新

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>iframe</title>
</head>

<body>
<header>
<nav>&nbsp;</nav>
</header>
<main>
<section>
<h1>TITLE</h1>
<h2>TOPIC</h2>
<h3>SUB-TOPIC</h3>
<p><span ="big">CONTENT</span></p>
</section>
<section>
<h3>MAP</h3>
<figure>
<figcaption>MAP TITLE</figcaption>
<iframe src="http://www.kitebom.com.au/" frameborder="0" scrolling="yes" style="overflow: auto; overflow-x: auto; overflow-y: auto; height: 100%; width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0;" height="60vh" width="100vw" allowfullscreen="true"></iframe>
</figure>
<p><span ="big">CONTENT</span></p>
</section>
</main>
<footer>
<aside>&nbsp;</aside>
</footer>
</body>
</html>

上面的链接转到了jsFiddle演示，因为iframed网站是不安全的，加载jsFiddle需要一段时间，但最终会加载。

Answer 2

替代方案：地图是一张图片，因此只要您使用域名和协议的绝对路径放在img src中，就可以在没有任何iframe的情况下使用它。

<img src="http://www.kitebom.com.au/images/graphs/map-melbourne.png?1441817570">

http://www.kitebom.com.au/images/graphs/map-melbourne.png?1441817570

响应式iFrame或替代解决方案

2 个答案:

CSS

HTML

更新

HTML