Question

目前，我有一个网站，其中以iframe为主要内容，并在边栏中有一些图表。但是，更改屏幕大小后，布局就会混乱。

由于无法在html中添加百分比值，我一直在努力使iframe适合网站。

这是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>

Answer 1

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

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

Answer 2

您无需为iframe应用position: absolute;。删除它可以解决问题。

.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;
  overflow: hidden;
  max-width: 100%;
  background-color: #fafafa;
}

.container iframe {
  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>

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

2 个答案: