html - 可滚动内容的响应高度

Question

我正在研究响应式设计。我有三个主要的div。标题 div 内容 div 和 fotter div。页眉和页脚的高度：50px。

内容（中间）div 有一个滚动条。我需要可滚动内容始终占据浏览器窗口的整个高度，但具有恒定的边距或填充，以防止与fotter重叠。

我目前在内容 div 上有 height:70%，但可滚动内容与小屏幕上的 fotter 重叠，这给了我可滚动内容和大屏幕上的 fotter 之间的巨大差距。

有没有办法在没有媒体查询的情况下完成这个？

任何帮助将不胜感激。

谢谢

Answer 1

将主列设置为 100% 高度，底部边距为页脚高度的负值。

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

.body {
    height: 100%;
    margin-bottom: -30px;
    background: #000;
    color: #fff;
}

.footer {
    height: 30px;
    background: #ececec;
}

示例：http: //jsfiddle.net/Lkj5P/