Лепкава подложка и превъртане на съдържанието WP - html, css, overflow, footer, adhesive-footer

Имаме сайт на Wordpress на адрес http://cmagics.eu/digitalmagazinepublishing който използва темата responsive2. Опитваме се да получим лепкава заглавка, която изглежда работи добре, но също се опитваме да получим лепкава долна част, която просто се придържа към дъното на страницата и работи като тази http://ryanfait.com/sticky-footer/

Заради леко загадъчната природа на отзивчивата2 тема как мога;

1, дръжте долния колонтитул в долната част на страницата, като използвате правилния залепващ метод, а не позицията: fixed

2, Спрете излишното превъртане на основното съдържание, когато на страницата има достатъчно място?

html източник:

виж източника:http://cmagics.eu/digitalmagazinepublishing/

CSS

#footer {
position: relative;
clear:both;
font-size: 11px;
line-height: 1.5em;
background: rgb(54, 53, 53);
color: #fff;
border-top: 2px solid #444;
text-align:center;
margin-top: -324px; **just a hack to make the footer appear at the bottom incorrectly**
margin-bottom: -25px;
height: 162px;
font-family: Roboto Regular;
}

#site-container {
width: 900px;
margin: 130px auto 0 auto;
overflow:auto;
padding-bottom:162px;

}

.hfeed {
min-height:100%;
height:100%;
height: auto;

}

Отговори:

Ето решение, което според мен е много чисто, Използвайте абсолютно позициониране за всичките си основниелементи на съдържанието (заглавие, статия, долен колонтитул). Използвайте @media запитвания за създаване на паузи на различни резолюции, ако трябва да промените височината на горния или долния колонтитул за различни ширини на екрана (отзивчив дизайн) и да укажете на основното си съдържание да скрие препълването. По този начин можете да използвате и плаващи, относителни оформления в основните области на съдържанието.

Тук е долен css: -

#footer {
position: fixed;
font-size: 11px;
line-height: 1.5em;
background: rgb(54, 53, 53);
color: #fff;
border-top: 2px solid #444;
text-align: center;
margin-top: -324px;
margin-bottom: -25px;
height: 162px;
font-family: Roboto Regular;
bottom: 0;
width: 100%;
}