如何创建div来填充页眉和页脚div之间的所有空格

我正在努力从使用表格进行布局,再到使用div(是的,是的辩论).我有3个div,标题,内容和页脚.页眉和页脚各50px.如何让页脚div保持在页面底部,内容div填充两者之间的空间？我不想硬编码内容div高度,因为屏幕分辨率可能会改变.

总结(这来自Traingamer提供的CSS Sticky Footer链接),这就是我使用的:

html, body 
{ 
    height: 100%; 
} 

#divHeader
{
    height: 100px;
}

#divContent
{
    min-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/
    height: 100%; 
    margin: 0 auto -100px; /*Allow for footer height*/
    vertical-align:bottom;
}

#divFooter, #divPush
{
    height: 100px; /*Push must be same height as Footer */
}


    

        Header
    

    Content Text

    



    Footer

使用flex布局我们可以实现这一点,同时允许自然高度页眉和页脚.页眉和页脚都将分别粘贴到视口的顶部和底部(很像本机移动应用程序),主内容区域将填充剩余空间,而任何垂直溢出都将在该区域内滚动.

见JS小提琴

HTML

  

    ...
  
  

    ...
  
  
  

CSS

html, body {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: none;
}

main {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto;
}

要扩展Mitchel Sellers的答案,请给出内容div高度:100%并给它一个自动余量.

有关完整的解释和示例,请参阅Ryan Fait的CSS Sticky Footer.

由于您知道标题的大小(高度),因此将其放在内容div中(或使用边距).

如果您的内容比窗口更大(更高),绝对位置会给您带来问题.