Html 带有页眉、页脚和正文的简单 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9351045/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple div with header,footer and body
提问by coder
I need a simple divwith header,footer and body content.
我需要一个简单div的header,footer and body content.
The headerand footerneeds to be fixedand the heightof div should be 250pxor max 500pxand its widthis 500pxAnd my body contentshould be fluidso that it should extend the content.
该header和footer需求是fixed与heightDIV应该是250px或最大500px和它width就是500px我的body content应该是fluid这样，它应该扩展内容。
Headerand footerneeds to be 40px.
Header并且footer需要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:
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:
这就是我需要的：
回答by Jared Farrish
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-heightand max-heightvalues, with overflow: autoon the .mainbodyelement.
您需要简化您的方法。我将阴影和圆角放在 a 上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>回答by Andres Ilich
The position:absoluteproperty removes your div from the natural flow of your document, thus leaving it to manual positioning that has to be modified every time. So, just let it flow naturally and contain your divs inside a container with the rounded effects you want, this way you can highly simplify your css and more easily manage your document, like so:
该position:absolute属性将您的 div 从文档的自然流中移除，从而将其留给每次都必须修改的手动定位。因此，只需让它自然流动并将您的 div 包含在具有您想要的圆形效果的容器中，这样您就可以高度简化您的 css 并更轻松地管理您的文档，如下所示：
HTML
HTML
<div class="container">
<div class="header">
header
</div>
<div class="mainbody">
main body
</div>
<div class="footer">
footer
</div>
</div>
CSS
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;
}
回答by Fabian Leutgeb
This could do what you need: http://jsfiddle.net/FZGL4/
这可以做你需要的：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;
}?
回答by Vivek Chandra
dont know whether this would fit your needs .. but,check out.. http://jsfiddle.net/aFgDN/1/
不知道这是否适合您的需求..但是，请查看.. 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;
}
This would be your html ..
这将是您的 html ..
<body>
<div class="header"></div>
<div class="mainbody"></div>
<div class="footer"></div>
</body>
have removed other things from your css -- you can add it later..
已经从你的 css 中删除了其他东西——你可以稍后添加它..
