Menu
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/
Editor: http://jsfiddle.net/AmVhK/3/
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.
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).
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 :)
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)
I have already set the following CSS:
html, body {height: 100%}
Any good solution to implement it.
659
OK here's my attempt at this, there's an issue with the iframe wanting to have a horizontal scroll in IE7 but the layout is good, I had to give up because fighting with IE7 makes me want to chew out my own eyes, hopefully someone could expand from here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>iframelayout</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
div, iframe {
margin: 0;
padding: 0;
border: 0;
}
.container {
position: relative;
width: 100%;
height: 100%;
background: #222;
}
.toolbar {
height: 200px;
background: #aaa;
}
.iframe-container {
position: absolute;
top: 200px;
bottom: 0;
width: 100%;
background: #555;
overflow-y: hidden;
}
.iframe-container iframe {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="toolbar">
</div>
<div class="iframe-container">
<iframe src="https://c9.io/" frameborder="0">Your browser is kaput!</iframe>
</div>
</div>
</body>
</html>
Here is a solution tested in IE8 and 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
