我需要一个简单的div with header,footer and body content.
The header and footer需要是fixed和heightdiv 的应该是250px or max 500px和它的width is 500px
And my body content应该fluid以便它应该扩展内容。
Header and 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;
}
这就是我需要的：
您需要简化您的方法。我将投影和圆角放在div.container，然后镜像适用的圆角（顶部和底部），这样就不会出现块状重叠。我还添加了一些min-height and max-height值，与overflow: auto on the .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 class="container">
<div class="header">Header</div>
<div class="mainbody">
<p>Body</p>
</div>
<div class="footer">Footer</div>
</div>
<div class="container">
<div class="header">Header</div>
<div class="mainbody">
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
</div>
<div class="footer">Footer</div>
</div>
<div class="container">
<div class="header">Header</div>
<div class="mainbody">
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
</div>
<div class="footer">Footer</div>
</div>
http://jsfiddle.net/VzGAy/2/ http://jsfiddle.net/VzGAy/2/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
