0

自从 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>
4

2 回答 2

0

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

于 2015-03-10T02:21:38.287 回答
0

看看这个小提琴。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;
    }
于 2013-10-31T18:11:30.043 回答