我有一个页面是浏览器高度的 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/