与页眉，页脚和身体

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

这就是我需要：

enter image description here

来源

2012-02-19 coder

@全部感谢您的支持人员，您让我以差异化的方式思考不同的每一个人。 – coder 2012-02-19 17:22:43

您需要简化您的方法。我将阴影和圆角放在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/

来源

2012-02-19 17:19:56

@ Jared-感谢这正是我需要:)感谢您的时间。 – coder 2012-02-19 17:21:57

而'.mainbody'上的'max-height'应该是'max-height：388px;'，所以它在溢出/滚动之前不会推下'.footer'：http://jsfiddle.net/VzGAy/2/ – 2012-02-19 17:28:57

还要注意，以前的jsFiddles应用了CSS重置（*正常化CSS *复选框在右侧）。要查看没有应用的外观，请参阅：http://jsfiddle.net/VzGAy/3/ – 2012-02-19 17:33:13

这可能会做你的需要：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;  
}

来源

2012-02-19 17:14:48 Fabian

不知道这是否会满足您的需要。但是，看看.. 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删除其他的事情 - 你可以在以后添加它..

来源

2012-02-19 17:16:15

我做了一些调整，以你的CSS：

http://jsfiddle.net/Cx4qG/

来源

2012-02-19 17:17:57

的position:absolute属性将删除文档的自然流动的股利，从而把它留给有每次修改手动定位。那么，就让它自然流和包含您的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/

来源

2012-02-19 17:26:05

'：before'，'：after'和'clear：both''是什么意思？我[同意容器帮助]（http://jsfiddle.net/VzGAy/2/），但我没有看到第一个类定义应该是什么价值。 – 2012-02-19 17:31:35

@JaredFarrish inline [clearfix]（http://nicolas.gallagher.com/micro-clearfix-hack/），因此，正确的收容。 – 2012-02-19 17:32:54

我明白它应该做什么;你为什么包含它[当它似乎没有任何影响]（http://jsfiddle.net/n6pSm/1/）？我错过了你期待的东西吗？ – 2012-02-19 17:35:44

与页眉，页脚和身体

回答

相关问题