jQuery中resize()函数仅刷新生效、窗口调整时失效问题求助

你遇到的情况很常见——代码只在刷新时生效，窗口调整没反应，大概率是脚本执行时机不对，或者没在页面初始化时主动跑一遍逻辑。

问题出在哪？ #

• 如果你的这段脚本是放在<footer>元素前面加载的，那执行$(window).resize(...)的时候，$('#footer')还没被浏览器渲染出来呢！事件是绑定了，但根本找不到对应的元素，自然没效果。
• 另外，你的代码只有在窗口resize的时候才会执行，但页面刚加载时并不会自动触发resize事件——你说刷新时生效，可能是刷新时浏览器窗口刚好有尺寸变化，刚好触发了一次，但正常加载时是不会跑这段逻辑的。

把代码包裹在$(document).ready()里，确保DOM完全加载后再绑定事件，同时在页面初始化时主动调用一次逻辑，这样不管是刷新还是窗口调整，都会生效：

<script>
$(document).ready(function() {
  // 把逻辑抽成复用的函数
  function adjustLayout() {
    const footerHeight = $('#footer').outerHeight();
    $('#footer').height(footerHeight);
    $('#content').css({ 'paddingBottom': `${footerHeight}px` });
  }

  // 窗口调整时触发
  $(window).resize(adjustLayout);
  
  // 页面刚加载时主动跑一遍
  adjustLayout();
});
</script>

额外优化小建议： #

• 我注意到你先拿了footer的outerHeight，又把它设为footer的height——这步其实有点多余哦，除非footer的高度是动态变化的（比如内容撑高），不然可以直接删掉$('#footer').height(footerHeight);，避免不必要的样式覆盖。
• 另外，resize事件会在窗口调整时频繁触发，可能会有点性能问题，加个防抖处理会更友好：

<script>
$(document).ready(function() {
  let resizeTimer;
  
  function adjustLayout() {
    const footerHeight = $('#footer').outerHeight();
    $('#content').css({ 'paddingBottom': `${footerHeight}px` });
  }

  $(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(adjustLayout, 200); // 200ms后再执行，避免频繁触发
  });
  
  adjustLayout();
});
</script>

这样调整后，窗口拖动时逻辑会正常执行，页面加载时也会自动初始化好样式啦！

内容的提问来源于stack exchange，提问作者Akshay Rathod