如何將2個iframe放在一起？

Question

我需要創建一個頁面，我有兩個相鄰的100％高度的iframe。

左側框架需要固定寬度爲140px，右側需要佔用屏幕其餘部分的寬度。請記住，兩個框架都需要100％的高度。

由於存在不同尺寸的屏幕，我無法在右邊的iframe上設置固定位置，因爲我希望它在第一個140px之後佔據所有屏幕;

我種類在使用百分比時使用它。但隨着個問題是在左邊的菜單有時表現得非常廣泛

我創建了一個小提琴告訴你什麼是我迄今所做

http://jsfiddle.net/mwg3j17d/16/

#main_block { 
 
    display: block; 
 
    width: 100% height: 100%; 
 
} 
 
#left_frame { 
 
    width: 25%; 
 
} 
 
#right_frame { 
 
    width: 75%; 
 
} 
 
#left_frame, 
 
#right_frame { 
 
    float: left; 
 
} 
 
iframe { 
 
    box-sizing: border-box; 
 
} 
 
.b_footer { 
 
    padding: 10px; 
 
    width: 100%; 
 
    background-color: blue; 
 
    text-align: center; 
 
    color: white: font-weight: bold; 
 
}

<div id="main_block"> 
 
    <iframe id="left_frame" src=""></iframe> 
 
    <iframe id="right_frame" src=""></iframe> 
 
</div> 
 

 
<div class="b_footer"> 
 
    Footer 
 
</div>

由於你可以知道，我的代碼有幾個問題。

1. 由於某種原因，頁腳背景顏色也顯示了iframs下的位置。
2. 第二個問題是我使用左側iframe的25％寬度，它應該設置爲140px
3. 最後，iframe的高度不佔用屏幕的整個高度。

如何糾正上述問題？

EDITED 我也嘗試使用表來完成工作，但左邊的iframe沒有正確的寬度。這裏是更新小提示向您展示 http://jsfiddle.net/mwg3j17d/19/

Answer 1

您可以使用width: calc(100% - 140px)來創建您的右列。另外，您的.b_footer樣式太大（10px填充+ 100％+ 10px填充），因爲您沒有指定box-sizing: border-box，所以我添加了它。

1. 使用float會將元素從正常的html流中取出，並且如果您不完全理解它們，會產生奇怪的副作用 。使用 display：inline block代替。
2. 使用width: calc(100% - 140px)來創建您的右欄。
3. 使用100vh代替100％的高度;
4. 您將遇到頁腳問題，因爲再次，100％+頁腳尺寸始終會大於頁面高度。最簡單的解決方案是修復頁腳的大小，並在高度計算中使用它。我已添加html,body { margin:0; padding:0; }刪除邊距和填充。如果你想要它們，手動添加它們，這樣所有的瀏覽器將使用相同的值，並在寬度/高度計算中使用新的值。

html,body { margin:0; padding: 0; } 
 
#main_block { 
 
    display: block; /* Useless, divs are display:block */ 
 
    width: 100%; /* Useless, display:block elements are width:100% by default */ 
 
    height: 100%; /* Fairly useless now, should take children's height */ 
 
    font-size:0; /* Force space between inline-block elements to be 0 */ 
 
} 
 
#left_frame { 
 
    width: 140px; 
 
} 
 
#right_frame { 
 
    width: calc(100% - 140px); 
 
} 
 
#left_frame,#right_frame { 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
    height: calc(100vh - 50px); 
 
} 
 
.b_footer { 
 
    padding: 10px; 
 
    height: 50px; 
 
    background-color: blue; 
 
    text-align: center; 
 
    color: white; 
 
    font-weight: bold; 
 
    box-sizing: border-box; 
 
}

<div id="main_block"> 
 
    <iframe id="left_frame" src=""></iframe> 
 
    <iframe id="right_frame" src=""></iframe> 
 
</div> 
 

 
<div class="b_footer"> 
 
    Footer 
 
</div>

Answer 2

要顯示他們旁邊的海誓山盟，也有多種選擇，在這種情況下，最簡單的似乎（對我來說，見仁見智），添加float:left;到兩個框架。

至於幀沒有達到全高的問題，對此，您可以使用height:100vh，這意味着100％的視口高度。

至於頁腳在iframe後面以及在它們下面，這是通過強制頁腳始終浮在頁面底部來固定的。這可以通過使用position:absolute和bottom:0以及left:0

對於具有寬度做是140px，calc(100vw-140px)會做很好這裏

你更新的代碼

HTML

<div id="main_block"> 
    <iframe src="http://www.w3schools.com" id="left_frame" src=""></iframe> 
    <iframe src="http://www.w3schools.com" id="right_frame" src=""></iframe> 

</div> 
<div class="b_footer"> 
    Footer 
</div> 

CSS

html, 
body { 
    margin: 0; 
    padding: 0; 
} 
#main_block { 
    display: block; 
    width: 100vw; 
    min-height: 100%; 
} 
#left_frame { 
    width: 140px; 
} 
#right_frame { 
    width: -moz-calc(100% - 140px); width: -webkit-calc(100% - 140px); width: calc(100% - 140px); 
} 
#left_frame, 
#right_frame { 
    float: left; 
    height:100vh; 
} 
iframe { 
    box-sizing: border-box; 
} 
.b_footer { 
    width: 100%; 
    height: 100px; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    top:100vh; 
    background-color:blue; 
    color:white; 
    text-align:center; 
} 

更新Fiddle

希望這有助於！

Answer 3

如果你打算有多個基本上填滿整個頁面的iFrames，爲什麼不用frameset呢？

<frameset rows="*,100"> 
    <frameset cols="140,*"> 
    <frame src="left.htm"> 
    <frame src="right.htm"> 
    </frameset> 
    <frame src="footer.htm"> 
</frameset> 

這就避免一次所有的問題。