CODEWITHSUNDEEP
jqueryhtmlcssresponsive-design
Shakil
Shakil

Reputation: 715

How to get rid of this blank space at the bottom?

So I'm designing this responsive website with Bootstrap & jQuery. The homepage background is an image that syncs with window size. But the problem is, a blank spot is visible at the bottom when the page loads for the first time. It disappears once you resize the window.

Take a look at this Fiddle.

Screenshot

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%;
}

Upvotes: 1

Views: 71

Answers (2)

AdityaParab
AdityaParab

Reputation: 7100

You're not updating the height on document ready. That function is triggered only on window resize.

I suggest you separate out the callback function window resize and call it in document ready. The var wheight = $(window).height(); should be done after document is ready to get correct value.

$(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);
}

Upvotes: 2

pj100
pj100

Reputation: 402

You have an hr element below your closing html tag. Remove this.

Upvotes: 0

Related Questions