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 px，#legs高20 px。问题是我想根据用户的分辨率扩展#body的高位。例如，如果用户有800x600，则意味着它使用#head的65px和#legs的20px，总共85px。仍有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);
}

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

1 个答案: