I have the following scenario:-
In an html page, display a top bar followed by another html page included dynamically on to the lower part of the page (for which I've used an Iframe). So, scroll bars for the window as such should not come up. Instead, a scroll bar for the included page should come up. I could do this using an overflow: hidden property on the body of the page.
But now, inorder to achieve this, i had to set the height of the iframe to 100% so that the page looks seamless. The problem with this is that the lower div which conatins the iframe flows out of <body> of parent and since I've given an overflow:hidden to the body, it cuts off the last bit of every included page. How do I overcome this?
The code :-
<!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>