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

1、index.html

2、iframetop.html

3、iframebottom.html

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

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

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)

    }

谢谢showbo这位朋友的回答，功能是实现了，但是页面效果不行，因为在按钮的上面还有图片及文字，每次点击后iframebottom.html就回到了页面顶部，相当于重新加载了页面，要看刚才的内容还需要往下拉，有没有更好的办法，实现点击就展开，再点击就收缩？希望高手再帮忙想想办法.感谢！

把display="none" 改成display=""试试