'position: fixed' не позволит мне прокручивать. 'position: relative' не растянет div. Что использовать/как исправить?

Question

спасибо за помощь. У меня есть сайт с контейнером div, который я хотел бы растянуть до нижней части страницы. Использование position: fixed Я могу добиться этого, но нижний колонтитул внизу отсекает, и вы не можете прокручивать вниз.

Использование position: relative Я могу прокручивать, но контейнер div не растягивается в нижней части страницы.

Мой код выглядит следующим образом:

<div class="container"> 
    <div class="header"></div> 
    <div class="body"> 
    content content content 
    </div> 
    <div class="footer"></div> 
</div> 

И CSS:

.container { 
    position: relative; 
    bottom: 0; 
    top: 0; 
    left: 50%; 
    margin-left: -480px; 
    width: 960px; 
    height: auto; 
    background-color: #1b1a1a; 
} 
.body { 
    width: 703px; 
    min-height: 340px; 
    margin: auto; 
    background-color: #f2f2f2; 
    padding: 20px; 
    overflow: hidden; 
} 

Answer 1

Это то, что вы ищете?

http://jsfiddle.net/gespinha/jrsxN/7/

CSS

html, body { 
    height:100%; 
    margin:0; 
    padding:0; 
} 
.container { 
    width:100%; 
    height:100%; 
    position: absolute; 
    background-color: #1b1a1a; 
} 
.body { 
    background-color: #f2f2f2; 
    padding: 20px 20px 120px; 
} 
.footer { 
    width:100%; 
    height:100px; 
    position:fixed; 
    bottom:0; 
    background:#f00; 
}