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

8 篇文章 2 订阅
7 篇文章 0 订阅
下列代码中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");

    // 第一个参数为指定的对象
    // 第二个参数为容器对象
    //第三个及其后的所有对象均为部署在指定对象的上方或下方的对象,即在同一个容器中需要扣除高度的对象
    functionsetHundredPercentHeight(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来设置最底位置。
由于绝对定位是以整个浏览器为坐标轴的,故该方法不适合下方还有其他元素的情况。
相对来说,第一种方法更加通用一些。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值