display="block"改为"none"后，网页有空白及iframe 高度动态设置

Question

1、index.html

2、iframetop.html

3、iframebottom.html

主要问题：
1、iframebottom.html 里面，点击：展开介绍按钮时显示没有问题，但再点击收回介绍，span 的 display属性=none时，页面会留下一片空白（占用了空间），请问如何解决？
2、在 index.html 页面，嵌套了2个iframe,一般如何解决页面高度动态变化，也能够正常显示？希望能在源代码上直接更改，改好后可发至我邮箱：[e-mail]，谢谢。

3、CSDN发贴时，怎么源代码全部转换了，看的效果乱七八糟的。

Answer 1

setHeight改这样，因为iframe设置了高度后，所在页面的scrollHeight就是当前iframe的高度和body scrollHeight最大的一个

    function setHeight() {
        var iframe = document.getElementById('iframe-bottom');
        var body = iframe.contentWindow.document.body;
        iframe.height = 50;//还原成iframe里面center的高度，然后延时设置iframe高度为所加载页面的实际滚动高度
        setTimeout(function () { iframe.height = body.scrollHeight; }, 100)

    }