带有页眉、页脚和正文的简单 div答案

【问题标题】：Simple div with header,footer and body带有页眉、页脚和正文的简单 div
【发布时间】：2012-03-10 04:45:37
【问题描述】：

我需要一个简单的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;            
}

这是我需要的：

【问题讨论】：

@All-感谢你们的支持，你们让我以不同的方式思考每个人。

标签： html css header footer fluid-layout

【解决方案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 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/

【讨论】：

@Jared-谢谢，这正是我所需要的 :) 感谢您的宝贵时间。
并且.mainbody 上的max-height 应该是max-height: 388px;，因此它不会在溢出/滚动之前将.footer 向下推：jsfiddle.net/VzGAy/2
还要注意，之前的 jsFiddles 应用了 CSS 重置（右侧的 Normalized CSS 复选框）。要查看没有应用它的样子，请参阅：jsfiddle.net/VzGAy/3
@Jared-感谢提及。
如何让它跨越整个页面

【解决方案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/

【讨论】：

:before、:after 和 clear: both 的意义何在？我agree a container helps，但我看不出第一类定义的值应该是什么。
@JaredFarrish inline clearfix，所以，适当的遏制。
我明白它应该做什么；为什么你把它包含在when it doesn't seem to have any affect？我错过了你期待的东西吗？
来自 clearfix 页面：Including the :before selector is not necessary to clear the floats, but it prevents top-margins from collapsing in modern browsers. This ensures that there is visual consistency with IE 6/7 when zoom:1 is applied. 所以，正确的跨浏览器包含/放置一致性是您的答案。
我想我只是想念它，但这似乎是循环逻辑。示例标记中没有要清除的浮点数。

【解决方案3】：

不知道这是否符合您的需求.. 但是，请查看.. 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 中删除了其他东西——你可以稍后添加它..

【讨论】：

【解决方案4】：

我对你的 CSS 做了一些调整：

http://jsfiddle.net/Cx4qG/

【讨论】：

【解决方案5】：

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

【讨论】：