Div simples com cabeçalho, rodapé e corpo

preciso de um simples div com header,footer and body content.

O header e footer têm de ser fixed e o {[6] } de div deve ser 250px ou max 500px e o seu width é 500px E o meu {[11] } deve ser fluid para que possa estender o conteúdo.

Header e footer tem de ser 40px.

E preciso de uma linha horizontal depois do cabeçalho e acima do rodapé.

Já o fiz, mas não consigo pôr o pé dele, pois estou a enlouquecer com o alinhamento.

Alguém pode sugerir eu com isto:

CSS: 

mainbody
{
position:absolute;
Left:35%;
top:20%;
display:none;
height:250px;
width:500px;
margin-top: 0;
border:1px solid #fff;
box-shadow:0px 2px 7px #292929;
-moz-box-shadow: 0px 2px 7px #292929;
-webkit-box-shadow: 0px 2px 7px #292929;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background-color:#ffffff;
z-index:50;
}


.header
{
    height: 30px;
    border-bottom: 1px solid #EEE;
    background-color: #ffffff;
    height: 40px;
    width: 490px;
    padding: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}


.footer
{
width:500px;
margin-bottom: 0;
margin-top: 37px;
margin-left:-5px;
background-color: whiteSmoke;
border-top: 1px solid #DDD;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;            
}
Isto é o que eu preciso.

enter image description here

Author: coder, 2012-02-19
Source

5 answers

Tens de simplificar a tua abordagem. Coloquei a sombra e os cantos arredondados em um div.container, e então espelhei os cantos arredondados conforme aplicável (em cima e em baixo) para que você não tenha sobreposições blocky. Eu também adicionei alguns valores min-height e max-height, com overflow: auto no elemento .mainbody. 
.container {
    width: 500px;
    max-height: 500px;
    margin: 10px;
    border: 1px solid #fff;
    background-color: #ffffff;
    box-shadow: 0px 2px 7px #292929;
    -moz-box-shadow: 0px 2px 7px #292929;
    -webkit-box-shadow: 0px 2px 7px #292929;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
.mainbody,
.header,
.footer {
    padding: 5px;
}
.mainbody {
    margin-top: 0;
    min-height: 150px;
    max-height: 388px;
    overflow: auto;
}
.header {
    height: 40px;
    border-bottom: 1px solid #EEE;
    background-color: #ffffff;
    height: 40px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.footer {
    height: 40px;
    background-color: whiteSmoke;
    border-top: 1px solid #DDD;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

<div id="container">
    <div class="header">Header</div>
    <div class="mainbody">
        <p>Body</p>
    </div>
    <div class="footer">Footer</div>
</div>

Http://jsfiddle.net/VzGAy/2/

 7
Author: Jared Farrish, 2012-02-19 17:29:14

A propriedade position:absolute remove o seu div do fluxo natural do seu documento, deixando-o assim ao posicionamento manual que tem de ser modificado sempre. Por isso, deixe-o fluir naturalmente e conter as suas divisórias dentro de um contentor com os efeitos arredondados que deseja, desta forma poderá simplificar muito o seu css e gerir mais facilmente o seu documento, como por exemplo:

HTML

<div class="container">
    <div class="header">
        header
    </div>
    <div class="mainbody">
        main body
    </div>
    <div class="footer">
        footer
    </div>
</div>

CSS

.container:before, .container:after {
    display:table;
    content:"";
    zoom:1 /* ie fix */;
}

.container:after {
    clear:both;
}

.container {
    width:500px;
    margin:0 auto;
    border:1px solid #fff;
    box-shadow:0px 2px 7px #292929;
    -moz-box-shadow: 0px 2px 7px #292929;
    -webkit-box-shadow: 0px 2px 7px #292929;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    background-color:#ffffff;
}

.mainbody {
    height:250px;
    width:500px;
    border: solid #eee;
    border-width:1px 0;
}


.header, .footer {
    height: 40px;
    padding: 5px;
}


.footer {
    background-color: whiteSmoke;
    -webkit-border-bottom-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-bottomleft:5px;
    border-bottom-right-radius:5px;
    border-bottom-left-radius:5px;
}

Demo: http://jsfiddle.net/n6pSm/

 2
Author: Andres Ilich, 2012-02-19 17:26:05
Não sei se isto se adequaria às suas necessidades .. mas olha só.. http://jsfiddle.net/aFgDN/1/ 
.header
{
position:fixed;
height: 30px;
background-color: yellow;
width: 500px;
}
body{
margin:0;
padding:0;
height:100%;
width:100%;
    overflow:hidden;

}
.mainbody{
position:fixed;
top:30px;
bottom:40px;
min-height:250px;
width:500px;
border:1px solid black;
background-color:red;
}
.footer{
width:500px;
position:fixed;
bottom:0;
height:40px;
background-color: blue;

}
Este seria o teu html .. 
<body>
<div class="header"></div>
<div class="mainbody"></div>
<div class="footer"></div>
</body>

Removeu outras coisas do seu css -- você pode adicioná-lo mais tarde..

 1
Author: Vivek Chandra, 2012-02-19 17:16:15
Fiz alguns ajustes no teu CSS.

Http://jsfiddle.net/Cx4qG/

 1
Author: Steve Wellens, 2012-02-19 17:17:57

Isto pode fazer o que você precisa: http://jsfiddle.net/FZGL4/

.mainbody
{
    min-height: 250px;
    width: 500px;
}


.header
{
    height: 40px;
    width: 500px;
    border-bottom: #000 1px solid;

}


.footer
{
    height: 40px;
    width: 500px;
    border-top: #000 1px solid;       
}​
 1
Author: Fabian, 2012-02-19 17:21:09