/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Stretch IFRAME to 100% height, mixing % and px…

Copy linkTweet thisAlerts:
May 07.2009

I would like to make a very simple page with a fixed height toolbar and below an iframe that should fit exactly the remaining part of the page stretching accordingly.

I set iframe height to 100%, but this makes the iframe to go under the browser’s statusbar, as you can see [B]the lower part of the iframe’s vertical scrollbar gets hidden under the browser.[/B] ?
This happens both in IE7 and FF3.

Any ideas are welcome.

[URL=”http://www.vanylla.it/test/test.html”]You can test page here [/URL]

or see code below: ?

[CODE]
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<html>

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252″>
<title>Test</title>
<style type=”text/css”>
html, body {margin: 0; padding: 0; border-width: 0; height: 100%;}
html, body {overflow: hidden;} /* overflow: hidden because we don’t want browser to show its scrollbars. */
#toolbar {height: 50px; background-color: #e7e9ec;}
#application_area {height: 100%; width: 100%;}
</style>
</head>

<body>
<div id=”toolbar”>Toolbar</div>
<iframe id=”application_area” src=”somepage.html” frameborder=”0″ scrolling=”yes”></iframe>
<!– I set scrolling=”yes” so you can always see the scrollbar, and you can see that the lower part of the scrollbar disappears under the browser. –>
</body>

</html>
[/CODE]

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@skilled1May 07.2009 — try it with remove the overflow = hidden

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test</title>
<style type="text/css">
html, body {margin: 0; padding: 0; border-width: 0; height: 100%;}
#toolbar {height: 50px; background-color: #e7e9ec;}
#application_area {height: 100%; width: 100%;}
</style>
</head>

<body>
<div id="toolbar">Toolbar</div>
<iframe id="application_area" src="somepage.html" frameborder="0" scrolling="yes"></iframe>
<!-- I set scrolling="yes" so you can always see the scrollbar, and you can see that the lower part of the scrollbar disappears under the browser. -->
</body>

</html>[/code]

if that dosen't work, i would recommend creating a table at width=100% and height=100%, with the top td filled with the div 'toolbar' and the remaining area filled by the iframe
Copy linkTweet thisAlerts:
@WebMaisterauthorMay 07.2009 — try it with remove the overflow = hidden[/QUOTE]
overflow = hidden was not set by mistake, it must not be removed otherwise browser will show its page scrollbars that would go over the toolbar too, moreover this does not solve the issue at all. :eek:


if that dosen't work, i would recommend creating a table at width=100% and height=100%, with the top td filled with the div 'toolbar' and the remaining area filled by the iframe[/QUOTE]
I tried already with a table but it does not work unless removing the DOCTYPE and making the browser to go in quirksmode.

But my question is: "Is there a decent way to make it work only with CSS without going in quirksmode." ?
Copy linkTweet thisAlerts:
@skilled1May 07.2009 — i got it working with

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test</title>
<style type="text/css">
html, body {margin: 0; padding: 0; border-width: 0; height: 100&#37;;}
html, body {overflow: hidden;} /* overflow: hidden because we don't want browser to show its scrollbars. */
#toolbar {height: 5%; background-color: #e7e9ec;}
#application_area {height: 95%; width: 100%; padding-bottom:16px;}
</style>
</head>

<body>
<div id="toolbar">Toolbar</div>
<iframe id="application_area" src="somepage.html" frameborder="0" scrolling="yes"></iframe>
<!-- I set scrolling="yes" so you can always see the scrollbar, and you can see that the lower part of the scrollbar disappears under the browser. -->
</body>

</html>[/code]

only problem is that if someone shrinks the size of the page, you will eventually lose the top info
Copy linkTweet thisAlerts:
@th1666May 14.2009 — Alright, here's what you do.

-Make the toolbar it's own html page and frame for the index page.

-Go to your application_area html page and put "body {padding-top: 50px;}" in the CSS.

-On your main page, you'll replace the iframes and use "<object>", along with the "data="page.html"" attribute. Because #1: you're not actually using the frames inline, and #2 iframes are dumb and should be deprecated.

-Then in the CSS, make the z-index for the toolbar 1.

main page:
[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Your Page</title>

<style type="text/css">

* {
padding: 0;
margin: 0;
border: 0;
outline: none;
font-size: 100&#37;;
}

body, html {
width: 100%;
height: 100%;
overflow: auto;
}

#toolbar {
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
border: 0;
height: 50px;
width: 100%;
z-index: 1;
}

#application_area {
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
border: 0;
height: 100%;
width: 100%;
z-index: 0;
}

</style>

</head>
<body>

<object id="toolbar" data="toolbar.html" type="text/html">
Your browser sucks and doesn't support HTML objects correctly.
</object>

<object id="application_area" name="application_area" data="application_area.html" type="text/html">
Your browser sucks and doesn't support HTML objects correctly.
</object>

</body>
</html>
[/code]

application area html page:
[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Application Area</title>

<style type="text/css">
* {
margin: 0;
padding: 0;
line-height: 1;
}

body {
background-color: #666666;
padding-top: 50px;
}

</style>

</head>
<body>

Your stuff here.

</body>
</html>[/code]

And for the tool bar just style it how you want.
Copy linkTweet thisAlerts:
@WebMaisterauthorJun 20.2009 — Does anyone found a solution for this problem?! ?

Unfortunately skilled1's idea can not be even considered a solution, because the toolbar shrinks as he also said.

And th1666's idea is a partial solution because [B]we don't want to encapsulate the toolbar into an iframe/object, the toolbar must remain in the main page[/B], otherwise we would have used framesets.

If the toolbar is encapsulated into an iframe/object and we want it to show for instance a popup menu, this menu will disappear below the iframe/object's borders.
Copy linkTweet thisAlerts:
@ScriptageJun 20.2009 — Why don't you just absolute position the iframe and toolbar to the top left of the screen thus:

[code=html]
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Toolbar</title>
<style type="text/css">
html, body{

width: 100%;
height: 100%;
padding: 0px;
margin: 0px;

}

#header{

height: 150px;
width: 100%;
position:absolute; top: 0px; left: 0px;
background-color: #002EB8;

}


#main{

width: 100%;
height: 100%;
border: 0px;
position:absolute; top: 0px; left: 0px;
}
</style>
</head>
<body>
<iframe name="main" id="main" frameborder="0"></iframe>
<div id="header">
Toolbar
</div>

</body>
</html>
[/code]

and then in your pages that are opened in the iframe:

[code=html]
<style type="text/css">

body{

margin-top: 150px;

}
</style>
[/code]
Copy linkTweet thisAlerts:
@WebMaisterauthorJun 22.2009 — The idea is intersteing, but it doesn't work. Now the scrollbar of the iframe gets hidden under the toolbar.

Unfortunately I discovered it seems there is no solution unless using Quirksmode or a small piece of Javascript to resize iframe height on browser windows's resize event.

Everyone can read more here.
×

Success!

Help @WebMaister spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...