元素占满剩余空间

  假设元素c(height为百分百或者vh)包含a和b他们垂直排列,b需要占满剩余空间（高度自适应），有两种情况：

     1.a的高度固定，b占满剩余空间，解决方式设置b的height为calc(100% - a的height)，或者使用position的top和bottom特性或者使用绝对地位和margin特性，建议使用calc计算属性（减号两边要有空格）

     2.a的高度不固定，b占满剩余空间，（只要是需要元素占满剩余空间，强烈建议都使用这种方式，如果是横向的则column改为row即可）

        设置c  display: flex; flex-direction: column;

        设置b  flex:1; 则b会自动占满剩余空间

  或者用js动态计算：

    function setAutoHeightFn(className) {
      var toTrimHeight = 0
      $(className).siblings().each(function (i, n) {
        if (!($(n).css('display') === 'none')) {
          toTrimHeight += $(n).outerHeight() + Number($(n).css('margin-bottom').replace(/px/g, '')) + Number($(n).css('margin-top').replace(/px/g, ''))
        }
      })
      $(className).height('calc(100% - ' + toTrimHeight + 'px)')
    }

最后

以上就是正直花瓣为你收集整理的元素占满剩余空间的全部内容，希望文章能够帮你解决元素占满剩余空间所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。