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

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

这里是相关的CSS：

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

问题是行内容 iframe 不填充整个垂直空间，即使flexbox正在适当分配该空间。

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

推荐答案

这里有两件事要考虑：

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