如何讓IFRAME佔據網頁的右半部分？

Question

我意識到解釋如何讓兩個DIV並排出現有很多問題，但我已經嘗試了大部分他們推薦的內容，而且似乎沒有任何工作。

在頁面http://www.lastcalc.com/我希望帶有ID「工作表」（及其所有內容）的DIV佔據頁面的左半部分，並且ID爲「helpframe」的IFRAME佔據右半部分。

目前我想這一點：

DIV#worksheet { 
    float:left; 
    width:50%; 
} 

IFRAME#helpframe { 
    float:left; 
    width:50%; 
} 

但結果是，#helpframe是#worksheet DIV下方。

我也希望能夠使用JQuery來隱藏幫助框，當我這樣做時，工作表DIV將展開佔據整個頁面。

我該如何做到這一點？

Answer 1

的iframe只是絕對定位到右上：

#helpframe { 
    position : absolute; 
    top  : 0; 
    right : 0; 
    height : 100%; 
    width : 50%; 
} 

您可以使用jQuery像這樣隱藏iframe：

$(function() { 
    $('#some-button').click(function() { 
     $('#helpframe').hide(); 
     $('#worksheet').width('100%'); 
    }); 
}); 

也有一些預先製作的動畫，你可以使用以顯示/隱藏元素：fadeIn/fadeOut/toggleFade/slideIn/slideOut/toggleSlide。