Question

我正在尝试扩展iframe的大小以填充我的网络应用中的剩余空间。我知道为div分配了最大空间（通过添加边框），但iframe高度本身并未扩展以填充整个垂直高度。

问题是row content iframe没有填满整个垂直空间，即使flexbox正在适当地分配该空间。

有什么想法吗？

＆＃13;

.box {
  display: flex;
  flex-flow: column;
  height: 100vh;
}
.box .row.header {
  flex: 0 1 auto;
}
.box .row.content {
  flex: 1 1 auto;
}
.box .row.footer {
  flex: 0 1 40px;
}
.row.content iframe {
  width: 100%;
  border: 0;
}

＆＃13;

<div class="box">
  <div class="row header">
    <h1>Event Details</h1>
    <div id="container">
      <h5>Test</h5>
    </div>
    <div data-role="navbar">
      <ul>
        <li><a href="players.html" class="ui-btn-active ui-state-persist">Players</a>
        </li>
        <li><a href="games.html">Games</a>
        </li>
        <li><a href="chat.html">Chat</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="row content">
    <iframe src="players.html"></iframe>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

＆＃13;

Answer 1

以下两点需要考虑：

创建弹性容器时，只有子元素成为弹性项目。除了孩子之外的任何后代不 flex项目和flex属性不适用于他们。

您的iframe不是灵活项目，因为它是div class="row content"的子项，是灵活项目，但不是灵活容器。因此，不应用flex属性，并且iframe没有理由伸展。
要将弹性属性应用于弹性项目的子级，您需要使弹性项目也成为弹性容器。试试这个：
```
.box .row.content {
    flex: 1 1 auto;
    display: flex; /* new */
}
```

通过上面的调整，iframe的父级变为（嵌套的）弹性容器，iframe成为弹性项目，默认弹性设置（包括align-items: stretch）生效。 iframe现在应该占据容器的整个高度。

Answer 2

您可以使用flexbox修复它，确保iframe的容器（包装器）具有高度设置或其父设置，这可以是像素百分比或VH。和flex-direction：列。 iframe本身需要一个flex：1 1 auto;不需要任何其他东西，所以没有设置高度或宽度。

Internet Explorer可能会对iframe的宽度产生一些问题。但它应该垂直工作。对于IE11，请确保在包装器上设置min-height：0。

body{
  padding:1em;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content: center;
  height:100vh;
}

.wrap {
  display: flex;
  flex-direction: column;
  width: 80vw;
  height: 80vh;
  border: 2px solid blue;
  min-height: 0;
}

.frame {
 flex: 1 1 auto;
 border: 0;
}

Simplified jsfidle demo Complex jsfidle demo

在Flexbox中扩展iframe

2 个答案: