如何使DIV页眉和页脚之间的高度达到100%
提问于 2012-04-19 12:39:30
有没有办法设置一个布局，让页眉是50px，正文是100%，页脚是50px？
我希望身体最小限度地占用整个观察区域。我希望页脚和页眉始终显示在屏幕上
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-04-19 12:56:38
我用jsfiddle创建了一个示例：
更新的JsFiddle：http://jsfiddle.net/5V288/1025/
HTML：
<body>
<div id="header"></div>
<div id="content"><div>
Content
</div></div>
<div id="footer"></div>
</body>CSS：
html { height: 100%; }
body {
height:100%;
min-height: 100%;
background: #000000;
color: #FFFFFF;
position:relative;
}
#header {
height:50px;
width:100%;
top:0px;
left:0px;
background: #CCCCCC;
position:fixed;
}
#footer {
height:50px;
width:100%;
bottom:0px;
left:0px;
background: #CCCCCC;
position:fixed;
}
#content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height:100%;
padding: 0 20px;
}
#content > div {
padding: 70px 0;
}没有边框，内容将是高度100% + 140px填充。有了边框，内容高度将是100%，填充将在里面。
Stack Overflow用户
发布于 2012-04-19 13:17:44
Stack Overflow用户
发布于 2012-10-16 05:12:01
我想你要找的是“多个绝对坐标”。一个单独的列表有一个解释here，但基本上，您只需要将主体的位置指定为绝对位置，并同时设置top: 50px和bottom: 50px
<body>
<style>
#header {
position: absolute;
height: 50px;
}
#body {
position: absolute;
top: 50px;
bottom: 50px;
background-color: yellow;
}
#footer {
position:absolute;
height: 50px;
bottom: 0;
}
</style>
<div id="header">Header</div>
<div id="body">Content goes here</div>
<div id="footer">Footer</div>http://www.spookandpuff.com/examples/absoluteCoordinates.html以一种更漂亮的方式展示了这项技术。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10228280
复制相关文章
腾讯云开发者
