Há um tempo estava procurando como colocar header e footer fixos no topo e no final da página, respectivamente, se ajustando ao conteúdo que ficaria entre dos dois, e consegui com o seguinte código:
CSS:
#wrapper {
min-height: 100%;
position: relative;
}
#container {
background: red;
padding-bottom: 80px;
overflow: hidden;
}
#content {
background: blue;
width: 1000px;
margin: 0 auto;
}
header {
height: 52px;
background: black;
}
header div {
width: 1000px;
background: red;
height: 52px;
margin: 0 auto;
}
HTML
<div id="wrapper">
<div id="container">
<header>
<div></div>
</header>
<div id="content"></div><!--content-->
</div><!--container-->
</div><!--wrapper-->
Gostaria de saber como, usando esse código, posso fixar o header no topo ao rolar a página, mas manter a estrutura do content e do footer.