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

查看：17
本文介绍了在 Flexbox 中扩展 iframe的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试拉伸 iframe 的大小以填充我的网络应用程序中的剩余空间.我知道为 div 分配了最大空间(通过添加边框)，但是 iframe 高度本身并没有扩展以填充整个垂直高度.

问题是 row content iframe 没有填充整个垂直空间，即使 flexbox 适当地分配了该空间.

有什么想法吗?

.box {显示:弹性；弹性流:列；高度:100vh；}.box .row.header {弹性:0 1 自动；}.box .row.content {弹性:1 1 自动；}.box .row.footer {弹性:0 1 40px；}.row.content iframe {宽度:100%；边框:0；}

<div class="行标题"><h1>活动详情</h1><div id="容器"><h5>测试</h5>
<div data-role="navbar"><ul><li><a href="players.html" class="ui-btn-active ui-state-persist">玩家</a><li><a href="games.html">游戏</a><li><a href="chat.html">Chat</a>

<div class="行内容"><iframe src="players.html"></iframe>

<div class="行页脚"><p><b>页脚</b>(固定高度)

解决方案

这里有两件事需要考虑:

  1. 当你创建一个弹性容器时，只有子元素成为弹性项目.子项之外的任何后代都不是弹性项目并且弹性属性不适用于它们.

    您的 iframe 不是弹性项目，因为它是 div class="row content" 的子项，后者是弹性项目，但不是弹性容器.因此，没有应用 flex 属性并且 iframe 没有理由拉伸.

  2. 要将 flex 属性应用到 f​​lex 项的子项，您需要使 flex 项也是一个 flex 容器.试试这个:

    .box .row.content {弹性:1 1 自动；显示:弹性；/* 新的 */}

经过上面的调整，iframe 的父级变成了(嵌套的)flex 容器，iframe 变成了一个 flex item，默认的 flex 设置(包括 align-items:stretch) 生效.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.

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

Any ideas?

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

解决方案

Here are two things to consider:

  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.

    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.

  2. 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 */
}

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆