自从 HTML FRAMES 标签贬值以来，我一直不知道如何使用带有分隔的 iframe 来创建相同的效果。我已经阅读了 StackOverflow 和许多其他网站上的 20 个解决方案，但似乎无法找到我需要的内容。
我想在左侧有一个 200 像素宽的静态列，并用 iframe 填充剩余页面。我希望它也能填满高度(100%)。 iframe 需要有滚动条。
ifrane 偏离中心，无论我使用什么代码，我最终都没有滚动条或双滚动条。任何帮助将不胜感激。
<!DOCTYPE HTML>
<html>
<head>
<style>
body, html {
margin:0px;
padding:0px;
overflow:hidden;
background: #f3f3f3;
}
iframe {
overflow:hidden;
height:100%;
width:100%
}
#leftcol {
position: absolute;
top: 0px;
left: 0px;
border: solid #0000ff 1px;
width: 200px;
height: 100%;
padding: 0px;
margin: 0px;
background: #ffffff;
}
#mainbody {
position: absolute;
top: 0px;
left: 200px;
border: solid #ff0000 1px;
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
background: #ffffff;
}
</style>
</head>
<body>
<div id="leftcol">Some text</div>
<div id="mainbody"><iframe height="100%" width="100%" src="http://example.com/"></iframe> </div>
</body>
</html>
最佳答案
看看这个 fiddle 。 http://jsfiddle.net/Pt3Et/7/
如果您的需求不同，请告诉我
body, html {
margin:0px;
padding:0px;
height: 100%;
background: #f3f3f3;
}
iframe {
float: right;
overflow-y: scroll;
height:100%;
width:100%
}
#leftcol {
border: solid red 1px;
width: 200px;
float: left;
height: 100%;
padding: 0px;
margin: 0px;
background: #ffffff;
}
#mainbody {
float: right;
border: solid #ff0000 1px;
height: 100%;
width: 62%;
padding: 0px;
margin: 0px;
background: #ffffff;
}
关于html - 带有 iframe 的静态左列填充页面右侧的剩余部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19713254/