asked on

Need help on getting rid of double scroll bars when using iframe

Hi,

I have this HTML page (see below) with 2 iframes, one right above the other. I am able to get rid of the double vertical scroll bars when viewed on a browser, but the issue I have is: If I resize the browser window's height to let's say 200px height, I will lose the vertical scroll bar when I try to scroll to the bottom of the page in the bottom iframe by dragging the scroll handle down. Is there a way to resolve this problem? (I am using "http://www.excite.com" as the source to both iframes as a demo.)

<html>
<head>
<title>Some Page Title</title>
<style>
html, body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
iframe#top-frame {
width: 100%;
height: 96px;
margin: 0;
padding: 0;
border: 0;
display: block;
}
iframe#bottom-frame {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
display: block;
}
</style>
</head>

<iframe src="http://www.excite.com" name=“top-frame” id="top-frame" frameborder="0" scrolling="no"></iframe>
<iframe src="http://www.excite.com" name=“bottom-frame" id="bottom-frame" frameborder="0" scrolling="auto"></iframe>

</html>

Many thanks in advance.

ASKER CERTIFIED SOLUTION

Kim Walker

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Bobby X

ASKER

Thank you, Kim. You've solved my problem.