noreply@nosalvation.org
IE7 и новее не будут отображаться.
В приведенном ниже коде (показан в примере GIF) метод вертикального выравнивания: " hacky " и only отображает содержимое в устаревших браузерах , таких как 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>
Как содержимое может сдвинуть нижний колонтитул, чтобы создать полосу прокрутки?
(вместо того, чтобы перекрываться и в конечном итоге исчезать)?