时间戳

首页 > 解决方案 > 如何使用 iframe 使网站响应屏幕尺寸

javascript - 如何使用 iframe 使网站响应屏幕尺寸

问题描述

目前，我有一个以 iframe 作为主要内容并在侧边栏中显示一些图表的网站。但是，当屏幕尺寸改变时，布局就会混乱。

我正在努力使 iframe 适合网站，因为我无法在 html 中添加百分比值。

这是html：

.header {
  background-color: #fafafa;
  text-align: left;
  padding-left: 25px;
  padding-top: 15px;
}
.row {
    display: flex;
}
.column.side {
    flex-basis: 25%;
    background-color: #fafafa;
}
.column.middle {
    flex-basis: 75%;
}
.container {
  position: relative;
  padding-bottom: 50%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background-color: #fafafa;
}
.container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="row">
  <div class="column middle">
    <div class="container">
      <iframe src="https://hestia.speckle.works/#/embed/li0TtsHb3F"
        frameborder="0"allowfullscreen>
      </iframe>
    </div>
  </div>

  <div class="column side">
    <div style="height: 500px">
      <h6>UNIT <span style="color: #3888db">BREAKDOWN</span></h6>
      <canvas id="chart1" height="250px"></canvas>
    </div>
  </div>
</div>

标签： javascripthtmlcssiframe

解决方案

嗨@jamie，您可以在 CSS 中对响应式网站使用媒体查询，也可以使用 iframe 的 scrolling="no" 属性来获得更好的用户界面。

    <iframe src="https://hestia.speckle.works/#/embed/li0TtsHb3F"
      frameborder="0" scrolling="no" allowfullscreen>
    </iframe>

推荐阅读