Вы ищете липкий нижний колонтитул .У меня был хороший опыт с решением Райана Фейта , но этот новый липкий нижний колонтитул удается работать без лишних тегов.
Из экспозиции на липкомнижний колонтитул :
В голове:
<style type="text/css">
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
А для вашего тела:
<div id="wrap">
<div id="main">
<!-- Your content here -->
</div>
</div>
<div id="footer">
</div>
Редактировать
Из вашего объяснения этоКажется, я вас неправильно понял.Вы ищете автоматически расширяющийся раздел, а не липкий нижний колонтитул.Если это так, вы можете получить этот эффект, используя display: table (хотя он не работает в таком количестве браузеров, как липкие нижние колонтитулы - например, в IE 7 происходит сбой).
Я создал пример здесь .
Код, для справки:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
min-height: 100%;
padding: 0;
}
.Wrapper {
display: table;
min-height: 100%;
min-width: 100%;
height: 100%;
width: 100%;
}
.Contents {
background-color: #CCC;
display: table-row;
min-height: 100px;
}
.Footer {
background-color: #0C0;
display: table-row;
min-height: 100%;
}
.data {
display: table-cell;
}
.Wrapper .data {
height: 100px;
}
.Footer .data {
height: 100%;
min-height: 40px;
background-color: #0C0;
}
</style>
</head>
<body>
<div class="Wrapper">
<div class="Contents">
<p class="data"> </p>
</div>
<div class="Footer">
<p class="data"> </p>
</div>
</div>
</body>
</html>