2015年更新：Flexbox方法
还有两个简短提及flexbox的答案；但是，那是两年多以前的事了，他们没有提供任何示例。flexbox的规范现在肯定已经确定。
注意：尽管CSS Flexible BoxesLayout规范处于候选推荐标准阶段，但并非所有浏览器都已实现。WebKit实现必须以-webkit-为前缀；Internet Explorer实现了规范的旧版本，并带有-ms-前缀。Opera12.10实施了该规范的最新版本，没有前缀。有关最新兼容性状态，请参见每个属性的兼容性表。
所有主要的浏览器和IE11 +都支持Flexbox。对于IE 10或更早版本，可以使用FlexieJS填充程序。
工作实例
使用flexbox，您可以轻松地在具有固定尺寸，内容尺寸尺寸或剩余空间尺寸的任何行或列之间进行切换。在我的示例中，我设置了页眉以使其与内容对齐（按照OP问题），添加了页脚以显示如何添加固定高度的区域，然后设置内容区域以填充剩余的空间。
html,body { height: 100%; margin: 0}.box { display: flex; flex-flow: column; height: 100%;}.box .row { border: 1px dotted grey;}.box .row.header { flex: 0 1 auto; }.box .row.content { flex: 1 1 auto;}.box .row.footer { flex: 0 1 40px;}<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` --><div > <div > <p><b>header</b> <br /> <br />(sized to content)</p> </div> <div > <p> <b>content</b> (fills remaining space) </p> </div> <div > <p><b>footer</b> (fixed height)</p> </div></div>在上面的CSS中，flex属性是flex-grow，flex-shrink和flex-basis属性的简写形式以建立flex项目的灵活性。Mozilla 很好地介绍了弹性盒模型。
