html - *仅限 IE6*：没有滚动条可向下推页脚... 相对父级 > 绝对子级 > 相对子级

Question

[e-mail]

IE7 和更高版本将不显示。

在下面的代码中（如 GIF 示例所示），垂直对齐方式是“ hacky ”，仅在IE6 等旧版浏览器中显示内容。

三个问题：

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>

---

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

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

标签： htmlcsscss-positionvertical-alignmentinternet-explorer-6