如何使页眉和页脚之间的 DIV 高度为 100%答案

【问题标题】：how to make DIV height 100% between header and footer如何使页眉和页脚之间的 DIV 高度为 100%
【发布时间】：2012-04-30 23:30:36
【问题描述】：

有没有办法设置一个布局，使页眉为 50 像素，正文为 100%，页脚为 50 像素？

我希望身体至少用完整个观看区域。我希望页脚和页眉始终显示在屏幕上

【问题讨论】：

stackoverflow.com/questions/6158975/css-100-height-layout
如果body中的内容超出了屏幕高度，你想要什么行为？

标签： html css css-position sticky-footer

【解决方案1】：

我在 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%，并且填充将在里面。

【讨论】：

如果 JSFiddle 不可用，我会很高兴include some code here。顺便说一句，box-sizing: border-box; 似乎没有任何区别。
没有边框的内容将是高度 100% + 140px 填充。使用边框框，内容高度将为 100%，并且填充将在内部。
滚动时不起作用，页脚随内容滚动。
这不是一个很好的例子，它只是滚动到页脚栏之外！

【解决方案2】：

只是 Andreas Winter 解决方案的修复：

http://jsfiddle.net/5V288/7/

*有了它的解决方案，如果内容大于可用的窗口区域，就会出现问题。

【讨论】：

感谢您 - 我一直在努力解决具有可滚动 100% 中心区域的固定页眉和页脚。这太完美了，现在可以有 EPIC 布局了！！！ ^__^
yayyyyyyy，很高兴为您提供帮助：3

【解决方案3】：

我认为您正在寻找的是“多个绝对坐标”。 A List Apart 有一个解释here 但基本上，你只需要将body 的位置指定为绝对位置，并同时设置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 以更漂亮的方式展示了该技术。

【讨论】：