Question

所以我正在使用Bootstrap＆amp; amp;来设计这个响应式网站。 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%;
}

Answer 1

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

我建议您将回调函数窗口单独调整大小并在文档就绪中调用它。在文档准备好获得正确的值之后，应该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);
}

Answer 2

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

如何摆脱底部的这个空白区域？

2 个答案: