元素高度问题答案

【问题标题】：Height of Element Issue元素高度问题
【发布时间】：2021-09-06 13:06:33
【问题描述】：

我有以下代码：

.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。当您在较小的设备上查看它时，我希望灰色部分在文档之后有一些边距，如第一张图片所示。

预期输出：

更大的屏幕

与我发送的第一张图片相同，因此这里没有任何变化。

小屏幕：

蓝线是灰色部分应该结束的地方，在文档和灰色部分之间有一些边距，就像在顶部一样。关于如何实现这一点的任何建议？

【问题讨论】：

您的问题是 iframe 上的高度...如果“最小”尺寸基本上是屏幕宽度，而标准页面基本上是 ~1:1.4，您可以设置高度（在较小的屏幕上）为宽度的 140~150%
你能展示一下吗？

标签： javascript html css responsive-design responsive

【解决方案1】：

我相信这样的事情：

为 iframe 做了一个类，对于媒体查询我放了 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>

【讨论】：