当浏览器大小变化时回调事件_浏览器大小变化缩放的的回调函数-优快云博客

本文链接：https://blog.youkuaiyun.com/bigtree_/article/details/103070286

本文介绍如何使用jQuery和BootstrapTable实现表格高度的动态调整，以适应浏览器窗口大小变化，避免出现多余的滚动条，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(window).resize(function () {          //当浏览器大小变化时
  alert($(window).height());          //浏览器时下窗口可视区域高度
  alert($(document).height());        //浏览器时下窗口文档的高度
  alert($(document.body).height());   //浏览器时下窗口文档body的高度
  alert($(document.body).outerHeight(true)); //浏览器时下窗口文档body的总高度 包括border padding margin
});

bootstarp table 高度动态化

初始化表格参数的时候我们设置高度：

tableBox.bootstrapTable('destroy').bootstrapTable({
    undefinedText: "-", //查找的字段没有发现时的显示内容
    height: $(window).height() - 100, //自定义表格的高度
    data: tableData,
    columns: CacheData.columnArr
});

但是当我们改变窗口的大小时，会出现两个竖向的滚动条，这是不正确的，解决的办法是：
给窗口添加一个resize（）的监听事件

$(window).resize(function() {
    tableBox.bootstrapTable('resetView', {
        height: $(window).height() - 100
    });
});
————————————————
版权声明：本文为优快云博主「木槿之夏」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/qq_34543252/article/details/79084757