html iframe query
I have the following scenario:-
In an html page, d开发者_C百科isplay 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>
If i'm understanding the problem correctly this might fix it, however i'm not sure I am.
iframe {
border:0 none;
margin:0;
overflow:visible;
padding:0;
width:100%;
}
You can do it with box-sizing. See this question for example.
Unfortunately IE6-7 doesn't support this property, so for that browser the only way forward is to add a JavaScript onresize handler to sniff the height of the window (document.documentElement.clientHeight assuming Standards Mode) and set the iframe height to that minus the size of the bar.
加载中,请稍侯......
精彩评论