0

HTML FRAMES タグが廃止されて以来、iframe と分割を使用して同じ効果を作成する方法がわかりません。StackOverflow や他の多くの Web サイトで 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

このフィドルを見てください。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 に答える
0

Alex Robinson のサイト fu2k.org/alex/css/frames/iframeに良い解決策があります。 彼は iframe を div に配置し、CSS を使用してそれらすべてを管理しています。さまざまな解像度のさまざまなモニターで動作します。サイズ変更時にも機能します。静的 div とサイズ変更 div を使用できます。ソースを表示してページを調べます。

于 2015-03-10T02:21:38.287 に答える