html - 不同分辨率下的网页最小高度

Question

我遇到了小问题。我想创建我的网站以至少达到用户的垂直分辨率。这是我的html：

<div id="head"></div>
<div id="body"></div>
<div id="legs"></div>

这是我的 CSS：

html {
    margin: 0;
    padding: 0;
}
#head {
    width: 100%;
    height: 65px;
    background-color: gold;
}
#body {
    width: 80%;
    height: 400px; /* This needs to be defined as remaining height */
    background-color: blue;
    margin: 0 auto;
}
#legs {
    width: 100%;
    height: 20px;
    background-color: gold;
}

这里是 jsfiddle http://jsfiddle.net/QgfJ3/embedded/result/。如您所见#head，高 65 像素和#legs高 20 像素。问题是我想#body根据用户的分辨率扩展 'high 。例如，如果用户有 800x600，这意味着它使用了#head65 像素和 20#legs像素，总共 85 像素。还有 715px 剩余，那么如何设置这个高度#body呢？

Answer 1

您必须使用 javascript 或 calc ( http://caniuse.com/calc )

jQuery方法：

$(window).on('resize', function() {
    $('#body').height($(window).height() - $('#head').height() - $('#legs').height());
});

Javascript（不确定是否适用于 IE）：

window.addEventListener('resize', function() {
    document.querySelector('#body').style.height = window.innerHeight - 85 + 'px';
}, false);

计算：

#body {
    height: calc(100% - 85px);
}