具有页眉，页脚和正文的简单div

Question

我需要一个简单的div和header,footer and body content.

header和footer必须为fixed，div的height应为250px或最大值500px，并且其width为500px我的body content应该是fluid，以便扩展内容。

[Header和footer必须是40px.

而且我需要在页眉之后和页脚上方有一条水平线。

我已经完成了，但是由于要对齐，所以无法设置页脚。

有人可以为此建议我吗：

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;            
}

这是我需要的：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS82UTcxUC5wbmcifQ==” alt =“在此处输入图像说明”>“ >>

我需要一个简单的带有页眉，页脚和正文内容的div。页眉和页脚需要固定，div的高度应为250px或最大为500px，其宽度为500px并且我的身体内容应为...

Answer 1

您需要简化方法。我将阴影和圆角放置在div.container上，然后根据需要镜像圆角（顶部和底部），这样就不会出现块状重叠。我还添加了一些min-height和max-height值，并在overflow: auto元素上添加了.mainbody。

Answer 2

position:absolute属性将div从文档的自然流中删除，从而使其处于手动定位状态，每次都必须对其进行修改。因此，只要让它自然流动并将div包含在具有所需舍入效果的容器中，就可以大大简化css并更轻松地管理文档，如下所示：

Answer 3

不知道这是否适合您的需求..但是，请签出.. http://jsfiddle.net/aFgDN/1/

Answer 4

我对您的CSS进行了一些调整：

Answer 5

这可以满足您的需要：http://jsfiddle.net/FZGL4/