设置iframe以占用页面中的剩余空间 [英] Setting iframe to take remaining space in page
问题描述
有很多关于iframe和它的高度的问题。有些是类似的，但不给我正确的答案。因此，让我解释一下我的情况：
There are quite a lot of questions regarding iframe and it's height. Some are similar but not giving me the right answer. So let me explain my case:
JSFiddle： http：// jsfiddle .net / AmVhK / 3 / show /
编辑器： http://jsfiddle.net/AmVhK / 3 /
JSFiddle: http://jsfiddle.net/AmVhK/3/show/
Editor: http://jsfiddle.net/AmVhK/3/
有一个有2行的表。第一个包含具有固定高度的div #toolbar。第二行包含一个包含iframe的div。我需要iframe获取工具栏div下方的可用空间。
There is a table with 2 rows. First one contains a div #toolbar with fixed height. Second row contains a div which holds an iframe. I need the iframe to take the available space below the toolbar div.
问题我面对的是 IE标准模式（支持IE8 +）。 让我们说，窗口的高度是1000px，工具栏的高度是200px，那么iframe的高度也是1000px，所以有滚动条。我需要iframe的高度（页面高度工具栏高度）。
Problem I am facing is in IE standards mode (supporting IE8+). Let's say, the height of the window is 1000px and height of toolbar is 200px, then the height of the iframe is also 1000px and so has scrollbars. I need the iframe to have height of (page height-toolbar height).
如果有一个CSS解决方案将是很好的。使用JavaScript获取高度并将其设置为iframe或其包含div是我最后的解决方案：）
It would be good if there is a CSS solution. Using JavaScript to get the height available and setting it to the iframe or it's containing div is the last resort solution for me :)
将工具栏或iframe设置为绝对位置将不适用于我的用例。 必要时可以更改标记（如果您要删除表格）
Setting the toolbar or iframe to absolute position also won't work for my use case. Markup change is ok if necessary (if you want to remove tables)
我已经设置了以下CSS：
I have already set the following CSS:
html, body {height: 100%}
这里是一个在IE8和FF17测试的解决方案
推荐答案
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<style type="text/css">
*
{
border: 0;
line-height: 0;
margin: 0;
padding: 0;
}
html,
body
{
height: 100%;
}
#layout
{
position: relative;
width: 100%;
min-height: 100%;
overflow-y: hidden;
background-color: green;
}
#toolbar
{
width: 100%;
height: 200px;
background-color: blue;
}
#content-wrapper
{
position: absolute;
top: 200px;
bottom: 0px;
width: 100%;
background-color: red;
}
#content
{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="layout">
<div id="toolbar">
</div>
<div id="content-wrapper">
<iframe id="content" name="content" src="https://c9.io/" border="0"></iframe>
</div>
</div>
</body>
</html>
这篇关于设置iframe以占用页面中的剩余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
