*仅适用于IE6 *：没有滚动条可以压下页脚...相对父级>绝对子级>相对子级

Question

在下面的代码（如GIF示例所示）中，垂直对齐方式为“ hacky ”，并且仅在旧版浏览器中显示内容像IE6。 IE7及更高版本不会显示。

三个问题：

1。 。内容与标题重叠。

2。 。内容不会将页脚向下推。

3。 。没有滚动条出现。而是内容从页面上消失了。

---

IE6和更低版本的代码：

            body {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
            html {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
            p {
                font-size: 21px;
                padding: 0;
                margin: 0;
                text-align: center;
            }
            #wrapper {
                height: 100%;
                min-height: 100%;
                margin-bottom: -50px;
                position: relative;
            }
            .header {
                height: 50px;
                background-color: aqua;
            }
            .vcenter-relative-parent {
                height: auto;
                overflow: hidden;
                position: relative;
            }
            .vcenter-absolute {
                position: absolute;
                top: 50%;
            }
            .vcenter-relative-child {
                margin-top: -50px;
                position: relative;
                top: -50%;
            }
            #footer {
                height: 50px;
                background-color: tomato;
            }
            .push { 
                height: 50px;
                position: relative;
                clear: both;
            }
        <div id="wrapper">
            <div class="header">

            </div>
            <div class="vcenter-relative-parent">
                <div class="vcenter-absolute">
                    <div class="vcenter-relative-child">

                        <p>
                            If you shorten the page height...<br>the content appears under the header and footer...<br>and there's no scrollbar.<br>
                            If you shorten the page height...<br>the content appears under the header and footer...<br>and there's no scrollbar.<br>
                            If you shorten the page height...<br>the content appears under the header and footer...<br>and there's no scrollbar.<br>
                            If you shorten the page height...<br>the content appears under the header and footer...<br>and there's no scrollbar.<br>
                            If you shorten the page height...<br>the content appears under the header and footer...<br>and there's no scrollbar.<br>
                            If you shorten the page height...<br>the content appears under the header and footer...<br>and there's no scrollbar.<br>
                            If you shorten the page height...<br>the content appears under the header and footer...<br>and there's no scrollbar.<br>
                        </p>
                        <div class="push"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="footer"></div>

---

内容如何向下拖动页脚以制作滚动条？

（而不是重叠并最终消失）？