javascript - White space at bottom of HTML

When I open my webpage (code and link below) there is a gap at the bottom of the page making the page slightly more than 100% height which causes the scroll bar to appear needlessly.

I know this has been asked before and I have looked through several answers to this question and I can't get any of them to work (don't rule out me doing it wrong though). I can't figure out whether the gap is being caused by Javascript, CSS or the HTML. I have been fiddling with the CSS for a while and nothing seems to be making a difference so If you spot something I've missed please tell me.

Interestingly the scroll bar disappears while the JavaScript to open and close the curtains is running but instantly reappears after it finishes.

Here is the HTML and Javascript.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>
      The Randoms
    </title>
    <script type="text/javascript" src=".3.2.js">
</script>
    <script src="jquery.easing.1.3.js" type="text/javascript">
</script>
    <script type="text/javascript">
        $(document).ready(function() {

                        $curtainopen = false;

                        $(".rope").click(function(){
                                $(this).blur();
                                if ($curtainopen == false){ 
                                        $(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'}); 
                                        $(".leftcurtain").stop().animate({width:'60px'}, 2000 );
                                        $(".rightcurtain").stop().animate({width:'60px'},2000 );
                                        $curtainopen = true;
                                }else{
                                        $(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'}); 
                                        $(".leftcurtain").stop().animate({width:'50%'}, 2000 );
                                        $(".rightcurtain").stop().animate({width:'51%'}, 2000 );
                                        $curtainopen = false;
                                }
                                return false;
                        });

                });     
    </script>
    <script type="text/javascript">
$(window).load(function() {
    $('.fade').fadeIn(3000, function() {
    // Animation plete
    });
    });
    </script>
    <script type="text/javascript">
$(window).load(function() {
    setTimeout(function() {
    $('.rope').fadeIn(3000, function() {
    // Animation plete
    });
    }, 3000);
    });
    </script>
    <script type="text/javascript">
function runMyFunction() {
    $(".fade").fadeOut('slow', function() {
    // Animation plete.
    });
    return true;
    }
    </script>
  </head>
  <body>
    <div class="leftcurtain">
      <img src="images/frontcurtain.jpg" alt="Image">
    </div>
    <div class="rightcurtain">
      <img src="images/frontcurtain.jpg" alt="Image">
    </div><a class="rope" href="#" onclick="return runMyFunction();"><img src="images/rope.png"
    alt="Image"></a>
    <div class="fade" id="fade">
      <h1>
        Ever wanted to know what's behind the curtain?
      </h1>
    </div>
    <div id="content">
      <p>
        Place Holder
      </p>
    </div>
  </body>
</html>

Here is the CSS

html
{
height=100%;
}

*
{
margin:0;
padding:0;
border:0;
margin-top:0;
margin-bottom:0;
}

body 
{
text-align: center;
background-color: #C20D19;
max-height:100%;
}

h1
{
margin-top: 0;
}

p,li
{
font-family: Arial, Helvetica,sans-serif; 
margin: 12px;
color:#ffffff
}

div
{
margin: 0;
max-height: 100%;
}

div#content
{
padding: 0;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
max-width: 80%;
width: 1000px;
height: 100%;
font-family: Arial, Helvetica,sans-serif; 
background-color: #000000;
}

img
{
border: none;
}

.leftcurtain
{
width: 50%;
height: 100%;
top: 0px;
left: 0px;
position: absolute;
z-index: 2;
}

 .rightcurtain
 {
width: 51%;
height: 100%;
right: 0px;
top: 0px;
position: absolute;
z-index: 3;
}

.rightcurtain img, .leftcurtain img
{
width: 100%;
height: 100%;
}

.rope
{
position: absolute;
top: -40px;
left: 80%;
z-index: 4;
display:none;
}


.fade
{
z-index: 5;
position: absolute;
display: none;
}

#fade
{
top: 80px;
left: 50%;
width: 250px;
height: 0 auto;
color: #ffffff;
font-family: Arial, Helvetica,sans-serif; 
}

If you think the referenced JavaScript to control the curtains movement is import you can find it at .easing.1.3.js.

To see the issue in action go to

This is my first project involving JavaScript so if you see anything wrong with what I've done please alert me to that as well.

Thanks in advance.

When I open my webpage (code and link below) there is a gap at the bottom of the page making the page slightly more than 100% height which causes the scroll bar to appear needlessly.

Interestingly the scroll bar disappears while the JavaScript to open and close the curtains is running but instantly reappears after it finishes.

Here is the HTML and Javascript.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>
      The Randoms
    </title>
    <script type="text/javascript" src="http://jqueryjs.googlecode./files/jquery-1.3.2.js">
</script>
    <script src="jquery.easing.1.3.js" type="text/javascript">
</script>
    <script type="text/javascript">
        $(document).ready(function() {

                        $curtainopen = false;

                        $(".rope").click(function(){
                                $(this).blur();
                                if ($curtainopen == false){ 
                                        $(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'}); 
                                        $(".leftcurtain").stop().animate({width:'60px'}, 2000 );
                                        $(".rightcurtain").stop().animate({width:'60px'},2000 );
                                        $curtainopen = true;
                                }else{
                                        $(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'}); 
                                        $(".leftcurtain").stop().animate({width:'50%'}, 2000 );
                                        $(".rightcurtain").stop().animate({width:'51%'}, 2000 );
                                        $curtainopen = false;
                                }
                                return false;
                        });

                });     
    </script>
    <script type="text/javascript">
$(window).load(function() {
    $('.fade').fadeIn(3000, function() {
    // Animation plete
    });
    });
    </script>
    <script type="text/javascript">
$(window).load(function() {
    setTimeout(function() {
    $('.rope').fadeIn(3000, function() {
    // Animation plete
    });
    }, 3000);
    });
    </script>
    <script type="text/javascript">
function runMyFunction() {
    $(".fade").fadeOut('slow', function() {
    // Animation plete.
    });
    return true;
    }
    </script>
  </head>
  <body>
    <div class="leftcurtain">
      <img src="images/frontcurtain.jpg" alt="Image">
    </div>
    <div class="rightcurtain">
      <img src="images/frontcurtain.jpg" alt="Image">
    </div><a class="rope" href="#" onclick="return runMyFunction();"><img src="images/rope.png"
    alt="Image"></a>
    <div class="fade" id="fade">
      <h1>
        Ever wanted to know what's behind the curtain?
      </h1>
    </div>
    <div id="content">
      <p>
        Place Holder
      </p>
    </div>
  </body>
</html>

Here is the CSS

html
{
height=100%;
}

*
{
margin:0;
padding:0;
border:0;
margin-top:0;
margin-bottom:0;
}

body 
{
text-align: center;
background-color: #C20D19;
max-height:100%;
}

h1
{
margin-top: 0;
}

p,li
{
font-family: Arial, Helvetica,sans-serif; 
margin: 12px;
color:#ffffff
}

div
{
margin: 0;
max-height: 100%;
}

div#content
{
padding: 0;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
max-width: 80%;
width: 1000px;
height: 100%;
font-family: Arial, Helvetica,sans-serif; 
background-color: #000000;
}

img
{
border: none;
}

.leftcurtain
{
width: 50%;
height: 100%;
top: 0px;
left: 0px;
position: absolute;
z-index: 2;
}

 .rightcurtain
 {
width: 51%;
height: 100%;
right: 0px;
top: 0px;
position: absolute;
z-index: 3;
}

.rightcurtain img, .leftcurtain img
{
width: 100%;
height: 100%;
}

.rope
{
position: absolute;
top: -40px;
left: 80%;
z-index: 4;
display:none;
}


.fade
{
z-index: 5;
position: absolute;
display: none;
}

#fade
{
top: 80px;
left: 50%;
width: 250px;
height: 0 auto;
color: #ffffff;
font-family: Arial, Helvetica,sans-serif; 
}

If you think the referenced JavaScript to control the curtains movement is import you can find it at http://www.osholt.co.uk/concepts/jquery.easing.1.3.js.

To see the issue in action go to http://www.osholt.co.uk/concepts

This is my first project involving JavaScript so if you see anything wrong with what I've done please alert me to that as well.

Thanks in advance.

Share Improve this question asked Jun 14, 2011 at 17:18 user798095 11 silver badge1 bronze badge

2 It might help you debug if you clean up your CSS some. You set margin:0 like four times for a number of elements. – Shauna Commented Jun 14, 2011 at 17:51
You also have CSS syntax errors which was pointed out by Jrod below. – Sparky Commented Jun 14, 2011 at 19:36

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

html
{
height=100%;
}

Should Probably be

html
{
height:100%;
}

Add overflow: hidden on body.

body 
{
    text-align: center;
    background-color: #C20D19;
    max-height:100%;
    overflow: hidden;
}

Edit: Another solution would be to add display: block; to the curtain images. This seems to be the real culprit. It fixes IE 7 as well:

.rightcurtain img, .leftcurtain img {
    display: block;
    height: 100%;
    width: 100%;
}

It is the height of your "curtain" containers that is causing the scrollbars to pop up. It seems that you are forgetting that the "curtains" would push the "border" of the container object (namely the div outside it and the body outside that) when their size exceeds the height of the screen. The problem with max-height is that its interpretation is pretty sketchy at best.

I'd suggest you switch to 99% instead of 100% for the curtain values. That makes your scrollbar go away.

Of course, you could use the overflow attribute as well; however, if something exceeds the width of your display it will not be visible (since "overflow" affects both X and Y). There is also overflow-y, which would affect only the y axis; however, not all browsers fully support that.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - White space at bottom of HTML - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)