Как прижать футер к низу?

Question

[Martyer]

Здравствуйте. Знаю что в поисковиках много похожих тем, но не помогли их способы, или я не правильно делаю.
Сейчас футер в main выглядит так:

< div class="header">шапка</div>
<div class="news">
{content}
<div id="footer">футер</div>
</div>

т.е футер в блоке с новостями, и в css прописал отступ от новостей на 300px.

Задача чтобы было так:

<div class="header">шапка</div>
<div class="news">{content}</div>
<div class="footer">футер</div>

т.е чтобы футер был отдельно от новостей, был растянут по ширине экрана и был постоянно прижат к низу страницы.

Вот мой css, подскажите пожалуйста что куда надо :

/*BODY*/
body {font-family:Arial, Helvetica, sans-serif; min-width:1024px; position: relative; font-size:12px; background:#fff; color:#666;height:100%;} 
html, body {height:100%; }
table,img {border:0;}
input, select, option {font-family:Arial, Helvetica, sans-serif; font-size:11px;}
h1, h2, h3, h4, h5 { line-height: normal; }
h1 { font-size: 1.25em; color: #666; } h2 { font-size: 1.2em; color: #666; } h3 { font-size: 1.25em; } h4 { font-size: 1.2em; } h5 { font-size: 1em; }
a {	 color: #1f78d3; text-decoration: none; outline:none;}
a:hover { color: #1f78d3; text-decoration: underline; outline:none;}
h1,h2,h3,h4 {margin:0; padding:0;  font-family:Arial, Helvetica, sans-serif; font-weight:normal;}
.reset, .reset li { list-style: none; padding:0; margin:0;  }
.clr { clear: both; }
.thide, .htmenu span { overflow: hidden; display: block; height: 0; line-height: normal; }
table.userstop, table.pm, table.tableform, table.calendar { border-collapse: collapse; border-spacing: 0; }
.lcol, .rcol, form { display: inline; }
.lcol { float: left; } .rcol { float: right; }
.small { font-size: 0.9em; }
.pink { color: #d51e44; }

/*Футер*/
#footer {border-radius: 10px; width: 100%;height: 60px;background: #494949;position: absolute;left: -8px;margin-top: 220px;}  
#textfooter {font-size:13px;color:#fff;text-align: center;}

Answer 1

[Ferzet]

Вот, здесь отличный вариант www.youtube.com/watch?v=LFlAovIEeU8

Comments

[Martyer]

Хороший урок, спасибо

Answer 2

[Сергей Протько]

philipwalton.github.io/solved-by-flexbox/demos/sti...

ну или как альтернатива - galengidman.com/2014/03/25/responsive-flexible-hei...

варианты с position:absolute вчерашний день.

Comments

[Martyer]

спасибо большое, сейчас опробую)

[Martyer]

нет, перестраивал, всё в кучу собирается)

[Сергей Протько]

Martyer: не понял. Оформите на jsbin/jsfiddle/codepen/etc

[kiberlain]

не понял, почему вариант с абсолютным позиционированием это вчерашний день?

[Сергей Протько]

kiberlain: есть flexbox-ы.

Answer 3

[Damir Aushenov]

* {
    margin: 0;
}
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 */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/