Question

所以就像标题所说的那样，我试图让iframe响应并填满一个空间，这甚至可能吗？我对此有点疯狂，我会发布我所拥有的东西，它似乎只是半响应。 iframe html标记中的宽度和高度没有明显区别：

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<html>

<body>
  <div class="container">

    <div class="row one">
      <div class="col-md-4">
        <div class="nav">
          <h1> Test nav </h1>
          <div class="links">
            <p><a href=""> Test </a>
            </p>
            <p><a href=""> Test </a>
            </p>
            <p><a href=""> Test </a>
            </p>
            <p><a href=""> Test </a>
            </p>
            <p><a href=""> Test </a>
            </p>
            <p><a href=""> Test </a>
            </p>
            <p><a href=""> Test </a>
            </p>
            <p><a href=""> Test </a>
            </p>
          </div>
          <!-- links -->
        </div>
        <!-- nav -->
      </div>

      <div class="col-md-8">
        <div class="video-container">
          <iframe width="100" height="100" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/282HjNJYhpE">
        </div>
      </div>
    </div>
    <!-- row -->


  </div>
  <!-- container -->
</body>

</html>

...
release {
    minifyEnabled true
    ...
}
...

Answer 1

只需将iframe的width和height设置为100%即可与容器的尺寸相匹配。最好使用CSS而不是使用width和height的HTML属性。

.nav {
  width: 80%;
  border: 5px solid;
  margin-top: 35%;
  margin-left: 10%;
  padding-left: 2%;
}
.links {
  padding-left: 15%;
  padding-top: 5%;
}
.col-md-8 {
  border: 5px solid;
}
.col-md-4 {
  border: 5px solid;
}
.video-container iframe {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-container {
  height: 100%;
  position: relative;
  padding-bottom: 56.25%;
}

<div class="container">

  <div class="row one">
    <div class="col-md-4">
      <div class="nav">
        <h1> Test nav </h1>
        <div class="links">
          <p><a href=""> Test </a>
          </p>
          <p><a href=""> Test </a>
          </p>
          <p><a href=""> Test </a>
          </p>
          <p><a href=""> Test </a>
          </p>
          <p><a href=""> Test </a>
          </p>
          <p><a href=""> Test </a>
          </p>
          <p><a href=""> Test </a>
          </p>
          <p><a href=""> Test </a>
          </p>
        </div>
        <!-- links -->
      </div>
      <!-- nav -->
    </div>

    <div class="col-md-8">
      <div class="video-container">
        <iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/282HjNJYhpE"></iframe>
      </div>
    </div>
  </div>
  <!-- row -->

  <div>
    <div class="col-md-12">
      test
      
    </div>
  </div>
  <!-- row -->


</div>
<!-- container -->

响应iframe填补div

1 个答案: