个人中心
gpt4 book ai didi

html - 为什么 iframe 的高度百分比在我的情况下不起作用？

转载 作者：太空宇宙 更新时间：2023-11-04 11:51:02 25 4
gpt4 key购买 nike

我有一个页面是浏览器高度的 100%。

该页面有 3 个 iframe:id_iframe_top、id_iframe_middle_left 和 id_iframe_middle_right。

id_iframe_top 位于顶部，宽度为 100%。

id_iframe_middle_left 和 id_iframe_middle_right 并排； id_iframe_middle_left 的宽度为 30%，id_iframe_middle_right 的宽度为 70%。

这是 HTML:

<body>
<div id="id_div_top_row">
    <iframe id="id_iframe_top" frameborder="0" src="">
    </iframe>
</div>
<div id="id_div_middle_row">
    <iframe id="id_iframe_middle_left" frameborder="0" src="">
    </iframe>
    <iframe id="id_iframe_middle_right" frameborder="0" src="">
    </iframe>
</div>
</body>

这是 CSS:

html {
    background: Green;
    height: 100%;
}

body {
    background: White;
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0;
}

iframe {
    box-sizing: border-box;
}

#id_iframe_top {
    background-color: Red;
    width: 100%;
}

#id_iframe_middle_left, #id_iframe_middle_right {
    float: left;
}

#id_iframe_middle_left {
    background-color: Pink;
    width: 30%;
}

#id_iframe_middle_right {
    background-color: Yellow;
    width: 70%;
}

这是 JSFiddle:http://jsfiddle.net/srhcan/6fsqdyy3/1/

现在我试图以百分比设置每个 iframe 的高度。所以我在 CSS 中将 id_iframe_top 的高度设置为 20%，将 id_iframe_middle_left 和 id_iframe_middle_right 的高度设置为 80%:

#id_iframe_top {
    background-color: Red;
    width: 100%;
    height: 20%;
}

#id_iframe_middle_left, #id_iframe_middle_right {
    float: left;
    height: 80%;
}

但是没有任何影响；无论我为高度设置多少百分比，它都不起作用。

为什么它不起作用，我该如何解决？

最佳答案

你想设置包裹 iframe 的 div 的高度，例如:

#id_div_top_row {
    height:80%;
}
#id_iframe_top {
    background-color: Red;
    height:100%;
    width: 100%;
}

然后，如果您希望 iframe 拉伸(stretch)整个 div，请将 iframe 的高度设置为 div 的 100%

这是 JSFiddle

关于html - 为什么 iframe 的高度百分比在我的情况下不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30628122/

25 4 0
文章推荐： css - 为什么我的图像和样式表在 RoR 应用程序中不起作用？
文章推荐： java - 在java中对未知维数数组的第一列进行排序
文章推荐： linux - git push 使用 crontab 每小时提示密码
文章推荐： java - 为什么 Maven 无法在子 pom 中找到/找出 Artifact 的版本？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com