本文介绍如何在浏览器窗口大小变化时，自动、实时地调整指定 div 的宽高，无需用户点击按钮，纯通过 javascript 监听 resize 事件实现。
本文介绍如何在浏览器窗口大小变化时，自动、实时地调整指定 div 的宽高，无需用户点击按钮，纯通过 javascript 监听 resize 事件实现。
在响应式网页开发中，有时需要让某个容器（如全屏背景区域或主布局容器）始终与视口尺寸保持一致。此时不能依赖静态 CSS（如 width: 100vw; height: 100vh），因为某些场景下需结合 JavaScript 动态计算或叠加逻辑（例如排除导航栏高度、适配滚动条等）。最可靠的方式是监听 window.resize 事件，并在回调中更新目标元素的尺寸。
以下是一个基于 jQuery 的完整实现方案：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="main-page">
<div class="container-fluid p-0">
<div class="row">
<div class="col-lg-12">
<div id="height" style="color: wheat; font-family: monospace; padding: 10px;"></div>
</div>
</div>
</div>
</div>function changeSize() {
const width = $(window).width();
const height = $(window).height();
$("#main-page").css({
width: width + 'px',
height: height + 'px'
});
$("#height").text(`Height: ${height}px | Width: ${width}px`);
}
$(document).ready(function() {
changeSize(); // 初始化尺寸
});
$(window).on("resize", function() {
changeSize(); // 窗口缩放时实时更新
});✅ 关键要点说明：
- $(window).width() 和 $(window).height() 获取的是当前视口（viewport）的宽高，而非整个文档高度；
- 必须在 $(document).ready() 中首次调用 changeSize()，确保页面加载完成即应用初始尺寸；
- 使用 .css({}) 替代 .width().height() 更灵活，且避免 jQuery 链式调用潜在的单位歧义；
- 注意性能：resize 事件触发频繁，如后续逻辑复杂，建议添加防抖（debounce）处理（本文基础场景可省略）；
- 若项目已使用现代前端框架（如 Vue/React），推荐优先采用 CSS 媒体查询或 useResizeObserver 等声明式方案，原生 JS 方案适用于轻量级或遗留系统集成。
该方法简洁、兼容性好（支持 IE9+），可直接嵌入现有 Bootstrap 项目中，与 container-fluid 等类协同工作，实现真正“随屏而变”的布局控制。
