Html 修复 iframe 高度与包含 div 完全相同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16027348/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fix iframe height to be exactly same as containing div
提问by baixiwei
I have a simple 4-panel webpage set up mostly using divs and css. The panel divs are header, footer, menu, and content. The menu and content are supposed to be parallel columns with the same height.
我有一个简单的 4 面板网页，主要使用 div 和 css 设置。面板 div 是页眉、页脚、菜单和内容。菜单和内容应该是具有相同高度的平行列。
Everything works fine until I put an iframe inside the content div. The content div then becomes taller than the menu div, even when I set them to the same height. I know that the iframe is the reason because this doesn't happen when I take out the iframe, but it's the content div - not the iframe - that actually is too tall.
一切正常，直到我将 iframe 放入内容 div 中。内容 div 然后变得比菜单 div 高，即使我将它们设置为相同的高度。我知道 iframe 是原因，因为当我取出 iframe 时不会发生这种情况，但内容 div - 而不是 iframe - 实际上太高了。
How can I fix this? Some similar questions have been asked, but the proposed solutions didn't work for me, unless I was doing something wrong. Here's my complete code:
我怎样才能解决这个问题？有人问过一些类似的问题，但建议的解决方案对我不起作用，除非我做错了什么。这是我的完整代码：
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
body {
margin: 0;
padding: 0;
}
#header {
background-color: #7D110C;
height:100px;
}
#menu {
float:left;
width:300px;
background-color: lightGrey;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#content {
margin-left:300px;
background-color: white;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#content iframe{
width:100%;
border:none;
margin: 0;
padding: 0;
background-color: pink;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#footer {
clear:both;
background-color: #7D110C;
height:100px;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="menu"></div>
<div id="content"><iframe id="content_iframe" name="content_iframe"></iframe></div>
<div id="footer"></div>
</body>
<script type="text/javascript">
console.log( $('#content').css('height') );
console.log( $('#content_iframe').css('height') );
</script>
</html>
回答by Mathijs Flietstra
height:auto !important;overrides height:500px;in #contentand in #content iframe. If you get rid of the height:auto !important;in both CSS classes, it works fine. jsFiddle
height:auto !important;覆盖height:500px;in#content和 in #content iframe。如果你去掉了height:auto !important;两个 CSS 类中的 ，它就可以正常工作。js小提琴
Ok here's the real fix, just leave everything as is and add display: blockto #content iframe. That fixes it. An iframe is an inline frame, hence the extra white space. Updated jsFiddle
好的，这是真正的修复，只需保留所有内容并添加display: block到#content iframe. 那修复它。iframe 是内联框架，因此有额外的空白。更新了 jsFiddle
回答by m.spyratos
If you set a fixed height:500px;and the iframe is taller than this, you will get a scrollbar on the side.
如果你设置了一个固定的height:500px;并且 iframe 比这个高，你会在侧面看到一个滚动条。
If you want a fixed height at all times, remove both height: auto !importantand min-height: 500pxand leave only height:500px.
如果您希望始终保持固定高度，请移除height: auto !important和min-height: 500px并仅保留height:500px。
height-auto: The browser calculates the height. This is default.min-height: Defines the minimum height
height-auto：浏览器计算高度。这是默认设置。min-height: 定义最小高度
The following will make menuand contenthave the same height at all times.
下面将menu和content在任何时候都有相同的高度。
HTML
HTML
<div id="wrapper">
<div id="menu"></div>
<div id="content"><iframe id="content_iframe" name="content_iframe"></iframe></div>
</div>
CSS(Just add this to the already existent)
CSS（只需将此添加到已经存在的）
#wrapper { display: table; }
#menu { display: table-cell; } /* Remove the float */
#content { display: table-cell; } /* Remove the float */
Note, this won't work on IE7 and below though. Either you'll have to use fixed height for both menuand contentor javascript.
请注意，这不适用于 IE7 及更低版本。要么你必须为menuandcontent或 javascript使用固定高度。
回答by artem
For modern browsers you can try this:
对于现代浏览器，您可以尝试以下操作：
add position:relativeto #content
添加position:relative到#content
remove width, height, min-heigth from #content iframeand add this instead:
从中删除宽度、高度、最小高度#content iframe并添加以下内容：
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
No idea what to do for IE 5 and 6, though.
但是，不知道要为 IE 5 和 6 做什么。
