如何让DIV高度100％的页眉和页脚之间(how to make DIV height 100

有没有一种方法来设置一个布局，使头为50像素，机身为100％和页脚是50px的？

我想身体在最低限度地使用了整个观看区域。我想有页脚和标题要在任何时候都在屏幕上

Answer 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％，填充会里。

Answer 2:

对于安德烈亚斯·温特的解决方案只是一个修复：

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

*随着它的解决方案，问题就出来了，如果含量大于可用窗口面积更大。

Answer 3:

我认为你在寻找什么是“多绝对坐标”。列表除了有一个解释这里，但基本上，你只需要指定人体的位置是绝对的，同时设置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显示更漂亮的方式的技术。

文章来源: how to make DIV height 100% between header and footer