下列代码中navbar高度为30px，content高度需要填满浏览器的剩余高度
＜div id="body"＞
＜div id="navbar"＞＜/div＞
＜div id="content"＞＜/div＞
＜/div＞
css如下：
html,
body {
padding: 0px;
margin: 0px;
height: 100%;
}
div
{
padding:0px;
margin:0px;
}
#navbar {
background-color: brown;
width: 100%;
height: 30px;
}
#content {
background-color: gray;
width: 100%;
}
方法一：通过js代码来动态设置高度来实现
- 在JS尾部直接调用下列函数
- 在body元素的resize事件增加对下列函数的调用
本例中执行setHundredPercentHeight("content","body","navbar");
// 第一个参数为指定的对象
// 第二个参数为容器对象
// 第三个及其后的所有对象均为部署在指定对象的上方或下方的对象，即在同一个容器中需要扣除高度的对象
function setHundredPercentHeight(objId,containerId)
{
var length = arguments.length;
var height = 0;
for (var i = 2; i < length; i++)
{
height += $("#" + arguments[i]).outerHeight();
}
$("#" + objId).height($("#" + containerId).height() - height);
}
方法二：通过CSS来直接实现
#content {
background-color: gray;
width: 100%;
position: absolute;
top: 30px;
bottom: 0px;
}
采用绝对定位，top用来设置显示的起始位置，通过bottom来设置最底位置。
由于绝对定位是以整个浏览器为坐标轴的，故该方法不适合下方还有其他元素的情况。
相对来说，第一种方法更加通用一些。
#nav {
background-color: #85d989;
width: 100%;
height: 50px;
}#content { background-color: #cc85d9;
width: 100%;
position: absolute;
top: 50px;
bottom: 0px;
left: 0px;
}