IE7 and newer won't display.
In the code below (shown in GIF example), the vertical alignment method is "hacky" and only displays content in legacy browsers like IE6.
The Three Problems:
1. Content overlaps the header.
2. Content doesn't push the footer down.
3. No scrollbar appears. Instead, the content disappears off the page.
The IE6 and older-only code:
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>
How can the content push the footer down, to make a scrollbar?
(Instead of overlapping and eventually disappearing)?