Я хотел бы иметь макет CSS с 100% ростом

Question

Я до сих пор добился большого прогресса. У меня есть липкий нижний колонтитул, работающий так, как хотелось бы. То есть

Если на экране мало контента, вы увидите нижний колонтитул. Если есть много контента надавите :)

Так что я пытаюсь сделать, это иметь миленькую рамку вокруг моего содержания тела, пока он не достигнет нижнего колонтитула :)

Увы я не в состоянии сделать это, и я только был в состоянии сделать это сделать это: http://jsfiddle.net/dcf104/ZQEGw/

Can you adise me on some additional code? 
Maybe I need some extra <divs>? 

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

Как я могу сделать их пройдите весь путь до нижнего колонтитула?

Большое спасибо, и ваша помощь очень ценится

Answer 1

Набор .стр-обертка так:

.page-wrap { 
     margin-bottom: -180px; 
     height: 100%; 
} 

http://jsfiddle.net/ZQEGw/1/

Answer 2

Это article describes a sticky footer:

• с небольшим содержанием шоу нижний колонтитул на экране - я предполагаю, что вы имеете в виду в конце окна просмотра (what is the viewport, article about viewport)
• толчок футер вниз, если содержимое заполняет видовой экран

Вы можете взять look at the gist или example on codepen

В CSS

html, body { margin:0; padding:0; height:100%; } 
#container { min-height:100%; position:relative; } 
#header { background:#ff0; padding:10px; } 
#body { padding:10px; padding-bottom:60px; /* Height of the footer */ } 
#footer { position:absolute; bottom:0; width:100%; height:60px;   
      /* Height of the footer */ background:#6cf; } 

Основной HTML структура

<div id=container> 
    <div id=header> 
    </div> 
    <div id=body> 
    </div> 
    <div id=footer> 
    </div> 
    </div>