Question

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

header和footer必须为fixed且div的height应为250px或最高500px及其width 1}}是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;            
}

这就是我需要的：

enter image description here

Answer 1

您需要简化您的方法。我将阴影和圆角放在div.container上，然后根据适用情况（顶部和底部）镜像圆角，这样就不会出现块状重叠。我还在min-height元素上添加了一些max-height和overflow: auto值以及.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/

Answer 2

position:absolute属性会从文档的自然流中删除div，从而使其每次都必须进行手动定位。因此，只需让它自然流动并将您的div包含在容器中，并使用您想要的圆角效果，这样您就可以高度简化您的CSS并更轻松地管理您的文档，如下所示：

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

演示：http://jsfiddle.net/n6pSm/

Answer 3

这可以满足您的需求：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;       
}

Answer 4

不知道这是否符合您的需求..但是，请查看.. 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;

}

这将是你的HTML ..

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

已从您的CSS中删除了其他内容 - 您可以稍后添加..

Answer 5

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

http://jsfiddle.net/Cx4qG/

简单的div与页眉，页脚和身体

5 个答案: