javascript - 如何让 IFRAME 占据网页的右半部分？

Question

我知道有很多问题解释如何让两个 DIV 并排显示，但我已经尝试了他们推荐的大部分内容，但似乎没有任何效果。

在页面上http://www.lastcalc.com/我希望 ID 为“worksheet”的 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.