html - <iframe> 未使用 css 网格(Chrome、Edge、Opera)中的可用空间，但它适用于 Firefox

Question

我有一个在弹出窗口中显示一些 YouTube 视频的网站。 我在编写代码时使用 Firefox 测试了所有内容。它的行为符合我在 Firefox 中的要求:弹出窗口的一半是视频，另一半是由 div 构成的。 Firefox screenshot

但如果我使用 Chrome、Opera 或 Edge 打开页面，它的行为如下:弹出窗口被正确划分，但 YouTube iframe 只有最小高度 Chrome screenshot .

我尝试在 iframe 上使用 height: 100% 修复它。它在 Firefox 中没有任何改变，但在其他浏览器上它使 iframe 网格区域比我想要的更大

有谁知道如何让它在其他浏览器上看起来像在 Firefox 中一样？

弹窗代码如下:

         <div class="popup">
            <iframe src="https://www.youtube.com/embed/..." frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

            <div id="tpop">
               //...
            </div>

            <div id="ipop">
               //...
            </div>'

            <div id="kpop">
               //...
            </div>

            <div id="bpop">
                //...
            </div>

         </div>

我的 CSS 是:

.popup {
    background: whitesmoke;
    z-index: 1000;
    position: fixed;
    width: 70%;
    bottom:40px;
    top: 40px;
    left: 50%;
    transform: translate(-50%, 0%);
    display: grid;
    grid-template-columns: 50fr 50fr;
    grid-template-rows: 60fr 24px 40fr;
    grid-template-areas: "iframe iframe"
                        "tpop ipop"
                        "kpop bpop";
}

iframe {
    grid-area: iframe;
    width: 100%;
}

#kpop {
    grid-area: kpop;
}

#bpop {
    grid-area: bpop;
}

#ipop {
    grid-area: ipop;
}


#tpop {
    grid-area: tpop;
}

Answer 1

也许您应该在选择器的父元素上使用 !important 标记来覆盖 iframe 的属性。

看看:

body iframe {
    height: 100% !important;
}