在Flexbox中扩展iframe [英] Expanding iframe within Flexbox

问题描述

我试图扩大 iframe 的大小，以填充我的网络应用程序中的剩余空间。我知道为 div （通过添加边框）分配的最大空间，但 iframe 高度本身是不会扩展到填充整个垂直高度。

I am trying to stretch the size of an iframe to fill the remaining space within my web app. I know the maximum space is being allocated for the div (by adding a border), but the iframe height itself is not expanding to fill the entire vertical height.

问题是行内容 iframe

The problem is the row content iframe is not filling the entire vertical space, even though the flexbox is allocating that space appropriately.

任何想法？

.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;
}

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

推荐答案

这里有两件事要考虑：

1. 当你创建一个flex容器时， flex项。

1. When you create a flex container only the child elements become flex items. Any descendants beyond the children are not flex items and flex properties don't apply to them.

您的 iframe <> / code>不是一个flex项，因为它是 div class =row content的子项，它是一个flex项，而不是一个flex容器。因此，没有弹性属性适用，并且没有理由让 iframe 拉伸。

Your iframe is not a flex item because it is a child of div class="row content" which is a flex item, but not a flex container. Therefore, no flex properties apply and there is no reason for the iframe to stretch.

flex属性为flex项目的子项，你需要使flex项目也是一个flex容器。尝试此操作：

To apply flex properties to the children of flex items, you need to make the flex item also a flex container. Try this:

.box .row.content {
    flex: 1 1 auto;
    display: flex; /* new */
}

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

With the adjustment above the iframe's parent becomes a (nested) flex container, the iframe becomes a flex item, and default flex settings (including align-items: stretch) go into effect. The iframe should now occupy the full height of the container.

这篇关于在Flexbox中扩展iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！