div的高度怎样撑开剩余的页面

Question

div的高度怎样撑开剩余的页面

Answer 1

这个百度的到。 CSS样式就可以控制了。 尝试着去 搜搜看

Answer 2

方法一：通过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来设置最底位置。

由于绝对定位是以整个浏览器为坐标轴的，故该方法不适合下方还有其他元素的情况。

相对来说，第一种方法更加通用一些。