javascript - 自动调整 Iframe

Question

我有 div，它可以根据屏幕的 height 和 width 进行自动调整。 JSFiddle ，并尝试调整浏览器的大小，div 中的 buttons 将自动调整自己。

.btn {
  position: relative;
  border: 0 !important;
  &:focus {
    outline: 0;
  }
  &:hover {
    top: 2px;
  }
  &:active {
    top: 6px;
  }
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  font-weight: bold !important;
  max-width: 250px;
  width: 100%;
  color: white;
  .border-radius(10);
  .transition(all, 50ms, ease);
  .btn(rgb(204, 204, 204), 20%);
}

.btn(@color, @percent: 10%) {
  border: 0;
  text-shadow: 0px 1px 0px darken(@color, @percent);
  background-color: @color;
  .box-shadow(0px, 6px, 0px, darken(@color, @percent));
  &:hover {
    border: 0;
    background-color: lighten(@color, 5%) !important;
    .box-shadow(0px, 4px, 0px, darken(@color, @percent));
  }
  &:active {
    .box-shadow(inset, 0px, 3px, 0px, darken(@color, @percent));
  }
}

.position {
  position: fixed;
  top: 20%;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.btn-container {
  height: 18%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="position">
  <div class="btn-container"><button class="btn bg-primary btn-lg">PLAY</button></div>
  <div class="btn-container"><button class="btn bg-primary btn-lg">SIGN IN</button></div>
  <div class="btn-container"><button class="btn btn-lg bg-primary">SETTINGS</button></div>
  <div class="btn-container"><button class="btn bg-primary btn-lg">ABOUT</button></div>
</div>

我想在 iframe 中使用那个 div，但问题在 iframe 中 >div 不会根据浏览器大小自动调整。 JSFiddle . (仅在加载时调整，页面加载后尝试调整浏览器大小)

<iframe width="100%" height="500" src="//jsfiddle.net/c7s086tb/embedded/result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>

Answer 1

要解决此问题，请将按钮的最大宽度设置为百分比。然后就可以了。现在它固定为 250 像素。请注意，iframe 中的 div 不会从父框架/窗口继承样式。您必须在 div 或 iframe 的头部声明此宽度内联......所以不要在父框架的头部。

.btn {max-width: 30%;}

这是解决方案:https://jsfiddle.net/c7s086tb/4/