可滚动内容的响应高度

Question

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

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

我目前有高度：70％的内容div，但可滚动的内容与较小的屏幕上的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/