如何消除Bootstrap响应式网站首次加载时的底部空白？

嗨，这个问题我碰到过好多次啦！你描述的“首次加载底部留白、调窗口后消失”的情况，核心原因一般是页面初始化时，背景图容器的高度没有被正确计算——要么是浏览器还没渲染完元素就执行了高度计算，要么是背景图加载慢导致尺寸没被识别，而窗口resize事件触发时会重新计算高度，所以空白就消失了。

给你几个靠谱的解决方案，按简洁程度排序：

方案1：用CSS视口单位（最省心） #

现代浏览器都支持vh单位（1vh = 视口高度的1%），直接用它让容器占满整个窗口高度，完全不需要JS：

/* 重置body默认margin，避免额外留白 */
body {
  margin: 0;
}

#fe {
  /* 最小高度设为视口100% */
  min-height: 100vh;
  background-image: url('你的背景图路径');
  /* 让背景图自适应覆盖容器 */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

如果页面有顶部导航栏，比如Bootstrap的navbar，需要把容器高度减去导航栏的高度，用calc就行：

#fe {
  min-height: calc(100vh - 50px); /* 假设navbar高度是50px */
}

方案2：JS确保页面/图片加载完成后计算高度 #

如果需要兼容老浏览器，或者必须用JS控制，那就要保证在页面完全加载（包括图片）后再执行高度计算，同时主动触发一次初始化：

$(document).ready(function() {
  // 定义计算高度的函数
  function updateHeroHeight() {
    var windowHeight = $(window).height();
    $('#fe').height(windowHeight);
  }

  // 等待背景图加载完成后再初始化高度
  var bgImageSrc = $('#fe').css('background-image').replace(/url\(['"]?(.*?)['"]?\)/, '$1');
  var bgImg = new Image();
  bgImg.src = bgImageSrc;
  
  bgImg.onload = function() {
    updateHeroHeight();
  };

  // 窗口调整时重新计算
  $(window).resize(updateHeroHeight);

  // 保险起见，页面DOM加载完也执行一次（防止图片缓存加载过快）
  updateHeroHeight();
});

同时配合CSS的背景图覆盖设置，效果会更好。

方案3：检查Bootstrap默认样式干扰 #

有时候Bootstrap的默认样式也会搞事情，比如body默认有margin: 8px，或者容器的padding没重置，这些都可能导致底部留白。可以先把基础样式重置一下：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

试试上面的方法，应该能解决你的问题！

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