简单的div与页眉，页脚和身体 [英] Simple div with header,footer and body

问题描述

我需要一个简单的 div 和页眉，页脚和正文内容。



头和页脚需要固定和 height div应该是 250px 或max 500px 和宽度是 500px
而我的正文内容应该是 fluid ，这样它才能扩展内容。

Header 和 footer 需要为 40px。

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

我已经完成了，但是我无法设置页脚

任何人都可以用这个建议我：

CSS：

  mainbody 
 {
 position：absolute; 
左：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-right-right-radius：5px; 
 -moz-border-radius-topleft：5px; 
 -moz-border-radius-topright：5px; 
 border-top-left-radius：5px; 
 border-right-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 和 max-height 值，其中溢出：auto .mainbody 元素。

 。容器{
 width：500px; 
最大高度：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; 
最大高度：388px; 
溢出：auto; 
} 
 .header {
 height：40px; 
 border-bottom：1px solid #EEE; 
 background-color：#ffffff; 
 height：40px; 
 -webkit-border-top-left-radius：5px; 
 -webkit-border-right-right-radius：5px; 
 -moz-border-radius-topleft：5px; 
 -moz-border-radius-topright：5px; 
 border-top-left-radius：5px; 
 border-right-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>标头< / div> 
< div class =mainbody> 
< p>身体< / p> 
< / div> 
< div class =footer>页脚< / div> 
< / div> 
  

http://jsfiddle.net/VzGAy/2/

I need a simple div with header,footer and body content.

The header and footer needs to be fixed and the height of div should be 250px or max 500px and its width is 500px And my body content should be fluid so that it should extend the content.

Header and footer needs to be 40px.

And I need a horizontal line after header and above footer.

I have done it but I am unable to set its footer as I am going nuts with the alignment.

Can anyone suggest me with this:

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

This is what I need:

解决方案

You need to simplify your approach. I put the drop-shadow and rounded corners on a div.container, and then mirror the rounded corners as applicable (top and bottom) so you don't have blocky overlaps. I also added some min-height and max-height values, with overflow: auto on the .mainbody element.

.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/

这篇关于简单的div与页眉，页脚和身体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！