This works in firefox,but in IE there will be two scrollbars,making it ugly(it's a simplified version of stumbleupon.com):

URL:http://222.73.204.65:81/stumbleupon.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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stumbleupon</title>
</head>
<style type="text/css">
div.webtoolbar {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent url(http://cdn.stumble-upon.com/i/toolbar/bgToolbar.gif) repeat-x scroll 0 0;
    border-top:1px solid #000000;
    height:33px;
    min-width:760px;
    overflow:hidden;
    position:absolute;
    top:0;
    width:100%;
    z-index:3;
}
</style>
<body style="margin: 0pt; padding: 0pt; overflow: hidden; height: 100%;">
<iframe id="stumbleFrame" frameborder="0" noresize="noresize" src="http://www.livescience.com/animals/green-slug-animal-plant-100112.html" name="stumbleContent" style="position: absolute; background: transparent; width: 100%; height:100%; top: 0; padding: 32px 0; z-index: 1;"></iframe>
<div class="webtoolbar">menus here</div>
</body>
</html>

1 answer

o.k.w 2355
2
points

There might be a better solution, what I'm proposing is to have a wrapper around the iframe which can extend to the edges of the browser window and the lower edges of the "div.webtoolbar".

Set the "scrolling" attribute of the iframe to "auto" and hide the scrollbars of the parent page by setting the html,body's "overflow" to "hidden".

The codes as follows (tested on IE7/8, FF3.6, Chrome):

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stumbleupon</title>
<style type="text/css">
html, body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
}
div.webtoolbar {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent url(http://cdn.stumble-upon.com/i/toolbar/bgToolbar.gif) repeat-x scroll 0 0;
    border-top:1px solid #000000;
    height:33px;
    min-width:760px;
    overflow:hidden;
    position:absolute;
    top:0;
    width:100%;
}
#stumbleFrame {
    position: absolute; 
    background: transparent; 
    top: 0; 
    width: 100%;
    height: 100%;
    padding: 0;
    z-index: 99;
    xoverflow-x: scroll;
}
div#frameWrapper {
    position: absolute; 
    background: transparent; 
    width: 100%;
    top: 34px; 
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 99;
    overflow: hidden;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
  div#frameWrapper {
    height: 100%;
  }
</style>
<![endif]-->
</head>
<body>
<div id="frameWrapper"><iframe id="stumbleFrame" frameborder="0" noresize="noresize" 
  scrolling="yes" 
  src="http://www.livescience.com/animals/green-slug-animal-plant-100112.html" 
  name="stumbleContent"></iframe></div>
<div class="webtoolbar">menus here</div>
</body>
</html>
Answered almost 7 years ago by o.k.w
  • Why it doesn't work in IE6? newbie almost 7 years ago
  • Somehow IE6 do not render the wrapper DIV when it is anchored using absolute position. I've added an IE conditional comment to set the wrapper height to 100% for IE6, see my updated answer. o.k.w almost 7 years ago