нижний колонтитул образца образца не может быть привязан к основанию

Question

Я использую бесплатную тему Wordpress из woothemes, темы Swatch. Я не знаю, использует ли кто-нибудь эту тему. Я затронул некоторые проблемы. Когда сообщения короткие. нижний колонтитул темы не может доходить до дна. Оставил кусок пустоты. Это так уродливо. Поэтому я хочу найти способ его исправить. Я читал несколько книг css и googling много раз, но я все еще не могу найти способ. Итак, я надеюсь, вы, ребята, можете дать мне несколько советов. Мои знания в области программирования настолько бедны. Простите за это. Надеюсь получить ваш ответ.

С уважением.

/* 2.1 Containers & Columns */ 
#wrapper { background: transparent url(images/wrapper-bg-colourstrip.png) repeat-x left top; padding-top: 5px; } /* Top padding is the height of the colour strip image. */ 

#main{width:575px;} 
#main.fullwidth, .layout-full #main, .col-full {width: 900px; margin:0 auto;} 

#sidebar{width:250px;} 
#sidebar .secondary { width:140px; } 

.entry img { max-width:565px; } 
.layout-full .entry img { max-width:890px; } 

.col-left { float: left; } 
.col-right { float: right; } 

.two-col-right #main { float:right; } 
.two-col-right #sidebar { float:left; } 



    /* 2.6 Footer */ 
#footer{padding: 30px 0 20px; background: url(images/bg-ripple-footer.png) repeat top left; color:#999;} 
#footer p {} 
#footer a { color: #ffffff; } 
#footer #credit img{vertical-align:middle;} 
#footer #credit span{display:none;} 

#footer-widgets { margin-bottom: -5px; background: url(images/bg-ripple-footer-widgets.png) repeat top left; padding:10px 0; } 
#footer-widgets .block { padding:20px 10px 0 10px; float:left; } 
#footer-widgets .col-1 .block { width:100%; padding-left:0; } 
#footer-widgets .col-2 .block { width:420px; padding-left: 20px; } 
#footer-widgets .col-3 .block { width:270px; padding-left: 16px; } 
#footer-widgets .col-4 .block { width:200px; padding-left: 10px; } 

Answer 1

Эта демонстрация демонстрирует широко используемый метод реализации липкого нижнего колонтитула http://ryanfait.com/sticky-footer.

Настройка HTML:

<div class="wrapper"> 
    <!-- Body Content --> 
    <div class="push"></div> 
</div> 

<div class="footer"> 
    <!-- Footer Content --> 
</div> 

Это CSS, что делает это:

html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */ 
} 
.footer, .push { 
    height: 142px; /* .push must be the same height as .footer */ 
} 

В противном случае вы можете попробовать просить WooThemes для поддержки.