元素问题的高度

Question

我有以下代码：

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}

.resume .resume-title {
  font-size: 26px;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #050d18;
}

.resume .resume-item {
  position: relative;
  text-align: center;
}

.add {
  padding: 0;
}

@media all and (max-width: 500px) {
  .embed-responsive {
    height: auto;
  }
}

<section id="resume" class="resume">
  <div class="container">

    <div class="section-title">
      <h2>Resum&egrave;
      </h2>
    </div>
    <div class="resume-item">
      <iframe src="https://drive.google.com/file/d/1QQ3lCOVEBd551AuNOA-XA4x6s1I3AaCZ/preview" width="100%" height="1070"></iframe>
    </div>

  </div>
</section>

所以在我这边，因为我将上述代码嵌入到网站中，所以输出如下所示：

但是，当我使用较小的屏幕查看网站时，我得到以下输出：

问题是即使在响应模式下，“模板”（灰色部分）也会扩展到 height: 1070。当您在较小的设备上查看文档时，我希望灰色部分在文档之后以一定的边距结束，如第一张图片所示。

预期输出：

更大的屏幕

与我发送的第一张图片相同，所以这里真的没有变化。

小屏幕：

蓝线是灰色部分应该结束的地方，在文档和灰色部分之间有一些空白，就像在顶部一样。关于如何完成此操作有什么建议吗？

Answer 1

我相信这样的事情：

为 iframe 制作了一个 class，对于媒体查询我输入了 140vw

为什么是 140vw？ A4 纸的比例约为 1.4（如果您知道它的其他格式...只需更改比例...）这意味着高度是宽度的 1.4，因此您可以使用它代替数字使用默认设置。

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}

.resume .resume-title {
  font-size: 26px;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #050d18;
}

.resume .resume-item {
  position: relative;
  text-align: center;
}

.add {
  padding: 0;
}

.iframe {
  height: 1070px;
}

@media all and (max-width: 500px) {
  .embed-responsive {
    height: auto;
  }
  .iframe {
    height: 140vw;
  }
}

<section id="resume" class="resume">
  <div class="container">

    <div class="section-title">
      <h2>Resum&egrave;
      </h2>
    </div>
    <div class="resume-item">
      <iframe src="https://drive.google.com/file/d/1QQ3lCOVEBd551AuNOA-XA4x6s1I3AaCZ/preview" width="100%" class="iframe"></iframe>
    </div>

  </div>
</section>

元素问题的高度

Height of Element Issue

html

javascript

css

responsive-design

responsive

预期输出：