CSS规则调整大小的iframe的宽度，但高度不

我有一个index.html标记如下：CSS规则调整大小的iframe的宽度，但高度不

<!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的宽度会相应地调整。但是，高度总是相同的。它大约为300像素，不会扩展到浏览器窗口的高度。我在FF 45和IE 11中试过。

问题：当应用于iframe时，高度未被调整的宽度与宽度相同的原因是什么？

来源

2016-04-06 NeoSer

I帧默认是'inline'所以尽量'行height'代替或使用'显示：块;还100％是什么？ 100％的内容包含iframe，因此您应该将iframe包装到元素中并明确设置高度。 – zer00ne

既没有'line-height'也没有'display：block;'帮助。结果是一样的 – NeoSer

父元素需要有一个定义的高度，否则'高度：100％'不起作用。 – Turnip

您的身高设置为100％，但是100％是什么？它始终是该元素的父项，因此父项的高度设置为什么？如果它没有设置任何东西，那么浏览器没有什么可引用的。

所以你必须给高度px这里

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

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

来源

2016-04-06 09:33:16

I帧默认的直列所以尽量line-height代替或使用什么display: block而且100％？ 100％的内容包含iframe，因此您应该将iframe包装到元素中并明确设置高度。

每当我使用一个iframe，我把它包装在一个块级元素中并设置position: relative。然后我在iframe上放置了position: absolutetop:0; bottom:0; right: 0; left: 0;。无论何时您想要控制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>

来源

2016-04-06 09:33:51 zer00ne

我想这是一样的，我会直接修复iframe的高度。关于100％，好吧，宽度似乎被计算为浏览器窗口宽度的100％。为什么它不适合那么高呢？ – NeoSer

这是一个内联元素，但如果您希望它像div一样行为（像正常），使用'display：block'就像在这个演示中一样。或者'display：inline-block'，如果你想让它与其他元素并排放置。 – zer00ne

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

来源

2016-04-06 09:34:00 Pugazh

CSS规则调整大小的iframe的宽度，但高度不

回答

相关问题