CSS Sticky Footer Not Working

Question

У меня есть простой макет, который я пытаюсь получить для работы с CSS. Верхний и нижний ряды высотой 35px с центром с динамическим размером. Я пытаюсь получить Sticky Footer работать с помощью этого учебника: http://www.cssstickyfooter.com/using-sticky-footer-code.html

Однако вместо сноски будучи на дне, независимо от количества содержания в середине, я вижу следующее:

Вот мой CSS

html, body{ 
height: 100%; 
margin: 0; 
} 

body{ 
font-family: Arial,Verdana; 
font-size: 12px; 
} 

#site_wrapper{ 
width: 100% 
min-height: 100%; 
background-color: #fff; 
padding: none; 
} 

#top_bar{ 
clear: both; 
height: 35px; 
background-color: #1468b3; 
line-height: 35px; 
font-size: 14px; 
text-align: right; 
color: #fff; 
padding-right: 15px; 

} 

#content{ /* Content Wrapper */ 
clear: both; 
overflow: auto; 
padding-bottom: 35px; 
} 

#content_left{ 
float: left; 
width: 50%; 
color: #000; 
} 

#content_right{ 
float: right; 
width: 50%; 
color: #000; 
} 

#footer{ 
clear: both; 
position: relative; 
margin-top: -35px; /* negative value of footer height */ 
height: 35px; 
background-color: #1468b3; 
line-height: 35px; 
font-size: 14px; 
color: #fff; 
} 

А вот HTML

<div id="site_wrapper"> 
    <div id="top_bar"> 
    This is the Top Bar 
    </div> 
    <div id="content> 
    <div id="content_left"> 
     Test 
    </div> 
    <div id="content_right"> 
     Test 
    </div> 
    </div> 
</div> 
<div id="footer"> 
    This is the footer 
</div> 

Answer 1

height: 100%; Добавить в #site_wrapper

DEMO