Question

我查找了如何让iFrame在响应环境中工作，没关系。我想要的是iframe匹配它旁边的div的高度。根据视口的不同，它要么略大一些，要么小一些。

我已经尝试过flexbox + flex：1并且我的流体网格已应用表格+表格单元格规则。

这是我的代码（HTML）;

<section class="section9"> <!-- section start (google maps) -->

<div class="col-12"> <!-- contact card container -->
   <h3 class="whitetxt">Contact us</h3>
    <div class="col-6 list2"> <!--  list 2 start-->
      <div class="col-16 cardtop2">
        <h3 class="whitetxt">Contact us</h3>
      </div>
      <div class="col-16 padsvg-half">
        <p>Ocean Village Innovation Centre, Ocean Way, Southampton SO14 3JZ</p>
        <p>faprotect@fa92group.com</p>
        <p>01234 725789</p>
        <p><strong>Opening times</strong></p>
        <p>Mon - Fri : 9am - 6pm</p>
      </div>
    </div> <!-- list 2 end -->

  <div class="google-maps col-10"> <!-- google maps plugin -->
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2516.603122013116!2d-1.3963879847838265!3d50.894055463183!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487471337880ce7f%3A0xb10a5bc30c720cee!2sAnsoff!5e0!3m2!1sen!2suk!4v1523993781041" width="100%" height="352.781px" frameborder="0" style="border:0;min-height:352.781;" allowfullscreen></iframe>
  </div> <!-- google maps plugin -->
</div> <!-- contact card container end -->

<div class="col-2"></div> <!-- gutter -->

对于CSS;

.google-maps {
    position: relative;
    padding-bottom: 35%; // This is the aspect ratio
    height: 0;
    overflow: hidden;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

如何使谷歌地图iFrame与div的高度相匹配？

0 个答案: