Question

我有一个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时，高度调整的宽度与宽度相同的原因是什么？

Answer 1

你的身高设定为100％但是100％是什么？它始终是该元素的父元素，那么父母的高度设置为什么？如果未设置为任何内容，则浏览器无需引用。

所以你必须在px这里给出身高

#pagecontent {
    border: none;
    height: 400px;
    width: 100%;
}

工作示例：https://jsfiddle.net/uxq4pzc1/

Answer 2

默认情况下，iframe是内联的，所以请尝试使用line-height或使用display: block 100％的内容？ 100％的任何包含iframe，所以你应该在一个元素中包装iframe并明确设置一个高度。

每当我使用iframe时，我将其包装在块级元素中并设置position: relative。然后我将position: absolute top:0; bottom:0; right: 0; left: 0;放在iframe上。无论何时想要控制iframe，都要使用它的父级。

有关详细信息，请参阅此post

#pagecontent {
  border: none;
  height: 100%;
  width: 100%;
  display: block;
}
.box {
  height: 20em;
}

<!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>
  <div class="box">
    <iframe id="pagecontent" src="http://example.com"></iframe>
  </div>
  <footer>...</footer>
</body>

</html>

Answer 3

#pagecontent {
  border: none;
  height: 100vh;
  width: 100%;
}

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

CSS规则调整iframe宽度但不调整高度

3 个答案: