我有一个 index.html 标记如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="Styles/main.css">
</head>
<body>
<header>...</header>
<iframe id="pagecontent" src="content.html"></iframe>
<footer>...</footer>
</body>
</html>
要应用样式，我使用 main.css 其内容如下:
#pagecontent {
border: none;
height: 100%;
width: 100%;
}
iframe 的宽度分配正确。也就是说，当我调整浏览器窗口大小时，iframe 的宽度也会相应调整。但是，高度始终相同。它约为 300px，不会扩展到浏览器窗口的高度。我在 FF 45 和 IE 11 中试过这个。
问题:应用到iframe时高度和宽度的调整方式不一样是什么原因？
最佳答案
您已将高度设置为 100%，但 100% 是什么？它始终是该元素的父元素，那么父元素的高度设置为多少？如果它没有设置任何内容，那么浏览器就没有任何可引用的内容。
所以你必须在这里以 px 为单位给出高度
#pagecontent {
border: none;
height: 400px;
width: 100%;
}
关于html - CSS 规则调整 iframe 宽度但不调整高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36446868/