如何摆脱底部的这个空白？答案

【问题标题】：How to get rid of this blank space at the bottom?如何摆脱底部的这个空白？
【发布时间】：2018-10-14 00:26:12
【问题描述】：

所以我正在使用 Bootstrap 和 jQuery 设计这个响应式网站。主页背景是与窗口大小同步的图像。但问题是，第一次加载页面时，底部会出现一个空白点。调整窗口大小后，它就会消失。

看看这个Fiddle。

index.html

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
 <body>
  <div id="featured">
    <div class="fullheight">
      <div class="item"><img src="https://wendellrobert.com/wp-content/uploads/2014/04/bokeh-cover-bg.jpg" alt="Shakil"></div>
    </div>
  </div>
 </body>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</html>

main.js

var wheight = $(window).height(); //get the height of the window


  $('.fullheight').css('height', wheight); //set to window tallness  


  $('#featured .item img').each(function() {
    var imgSrc = $(this).attr('src');
    $(this).parent().css({'background-image': 'url('+imgSrc+')'});
    $(this).remove();
  });

  //adjust height of .fullheight elements on window resize
  $(window).resize(function() {
    wheight = $(window).height(); //get the height of the window
    $('.fullheight').css('height', wheight); //set to window tallness  
  });

main.css

#featured .item {
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100%;
}

【问题讨论】：

为什么要用js来调整item的大小？为什么不直接使用height:100vh（适用于所有主流浏览器）：jsfiddle.net/0r0a0dk9/11
我是新手..会试一试。谢谢！

标签： jquery html css responsive-design

【解决方案1】：

您的结束 html 标记下方有一个 hr 元素。删除这个。

【讨论】：

打错了，我原来的代码里没有这个。

【解决方案2】：

您没有更新文档准备好的高度。该功能仅在调整窗口大小时触发。

我建议你分离出回调函数 window resize 并在 document ready 中调用它。 var wheight = $(window).height(); 应该在文档准备好获取正确值之后完成。

$(document).ready(function(){
  $('#featured .item img').each(function() {
    var imgSrc = $(this).attr('src');
    $(this).parent().css({'background-image': 'url('+imgSrc+')'});
    $(this).remove();
  });
  resize(); // call this after image is set.
  $(window).resize(resize); // call this on subsequent resize events.
});

function resize(){
    var wheight = $(window).height(); //get the height of the window
  $('.fullheight').css('height', wheight);
}

【讨论】：