Here is a scenario that I have encountered:
I want to display a top bar on an HTML page, followed by another HTML page dynamically included at the lower part of the page using an iframe. The goal is to prevent scroll bars for the window and only show a scroll bar for the included page. To achieve this, I applied the overflow: hidden property to the body of the page.
However, I had to set the height of the iframe to 100% in order to make the page look seamless. The issue with this approach is that the lower div containing the iframe overflows out of the parent <body>. Since I've used overflow:hidden on the body, it ends up cutting off the bottom of every included page. How can I solve this problem?
Below is the code snippet being used:
<!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>
<title>Show Asset</title>
<style>
html, body, iframe
{
height: 100%;
}
body
{
overflow: hidden;
margin: 0px;
}
iframe
{
width: 100%;
margin: 0px;
border: 0px;
padding: 0px;
}
.optionsBar
{
background-color: Lime;
}
.iframeHolder
{
/* height: 100%;*/
}
</style>
</head>
<body>
<div class="optionsBar">Test</div>
<div class="iframeHolder">
<iframe frameborder="0" scrolling="auto" src="http://en.wikipedia.org/wiki/Main_Page"></iframe>
</div>
</body>
</html>