Question

由于HTML FRAMES标记的折旧，我一直不知道如何使用带有divides的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>

Answer 1

看看这个小提琴。 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;
    }

Answer 2

Alex Robinson的网站有一个很好的解决方案：的 fu2k.org/alex/css/frames/iframe 他将iframe放在div中并使用CSS来管理它们。它适用于各种分辨率的不同显示器。调整大小时也适用。你可以有静态div和调整div。查看源以检查页面。

静态左列，iframe填充剩余页面的右侧

2 个答案: