帶有iframe填充剩餘部分的靜態左列頁面右側

由於HTML FRAMES標記的折舊，我一直無法使用iframe和divides創建相同的效果。我已經閱讀了StackOverflow和其他許多網站上的20個解決方案，似乎無法找到我需要的東西。帶有iframe填充剩餘部分的靜態左列頁面右側

我想在左邊有一個200像素寬的靜態列，並用iframe填充剩餘的頁面。我希望它也能填滿身高，（100％）。 iframe需要有滾動條。

該ifrane是偏離中心，並沒有mater我使用什麼代碼我結束了或者沒有滾動條或雙滾動條。任何幫助將不勝感激。

<!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>

來源

2013-10-31 Vern Southern

看看這個小提琴。 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-31 18:11:30 vitdes

有一個在亞歷克斯·羅賓遜的網站一個很好的解決方案： fu2k.org/alex/css/frames/iframe 他把I幀中的div和使用CSS管理他們所有。它適用於不同分辨率的不同顯示器。它也適用於您調整大小。你可以有靜態div和調整div的大小。查看來源以檢查頁面。

來源

2015-03-10 02:21:38 Researcher

帶有iframe填充剩餘部分的靜態左列頁面右側

回答

相關問題