如何将div高度填满剩余高度

下列代码中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;

}