HTML 底部的空白

Question

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.当我打开我的网页（下面的代码和链接）时，页面底部有一个间隙，使页面高度略高于 100%，导致滚动条不必要地出现。

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.我无法弄清楚差距是由 Javascript、CSS 还是 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.我一直在摆弄 CSS 一段时间，似乎没有什么不同，所以如果你发现我错过的东西，请告诉我。

Interestingly the scroll bar disappears while the JavaScript to open and close the curtains is running but instantly reappears after it finishes.有趣的是滚动条消失了，而 JavaScript 打开和关闭窗帘正在运行，但在完成后立即重新出现。

Here is the HTML and Javascript.这是 HTML 和 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.com/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 complete
    });
    });
    </script>
    <script type="text/javascript">
$(window).load(function() {
    setTimeout(function() {
    $('.rope').fadeIn(3000, function() {
    // Animation complete
    });
    }, 3000);
    });
    </script>
    <script type="text/javascript">
function runMyFunction() {
    $(".fade").fadeOut('slow', function() {
    // Animation complete.
    });
    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这是 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 .如果您认为用于控制窗帘运动的参考 JavaScript 是进口的，您可以在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要查看实际问题 go 到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.这是我第一个涉及 JavaScript 的项目，所以如果你发现我所做的有任何问题，请提醒我。

Thanks in advance.提前致谢。

Answer 1

Add overflow: hidden on body .添加overflow: hidden在body上。

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

Edit: Another solution would be to add display: block;编辑：另一个解决方案是添加display: block; to the curtain images.到窗帘图像。 This seems to be the real culprit.这似乎是真正的罪魁祸首。 It fixes IE 7 as well:它还修复了 IE 7：

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

Answer 2

html
{
height=100%;
}

Should Probably be应该是

html
{
height:100%;
}

Answer 3

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.您似乎忘记了当“窗帘”的尺寸超过屏幕高度时，它们会推动容器 object （即它外面的 div 和外面的 body ）的“边框”。 The problem with max-height is that its interpretation is pretty sketchy at best. max-height 的问题在于它的解释充其量是相当粗略的。

I'd suggest you switch to 99% instead of 100% for the curtain values.我建议您将窗帘值切换到 99% 而不是 100%。 That makes your scrollbar go away.这会让你的滚动条 go 消失。

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).但是，如果某些内容超出了显示的宽度，它将不可见（因为“溢出”会同时影响 X 和 Y）。 There is also overflow-y, which would affect only the y axis;还有overflow-y，只会影响y轴； however, not all browsers fully support that.但是，并非所有浏览器都完全支持这一点。

HTML 底部的空白

问题描述

3 个解决方案

解决方案1
4 2011-06-14 17:23:42

解决方案2
4 2011-06-14 17:25:52

解决方案3
0 2011-06-14 19:25:45

HTML 底部的空白

问题描述

3 个解决方案

解决方案1 4 2011-06-14 17:23:42

解决方案2 4 2011-06-14 17:25:52

解决方案3 0 2011-06-14 19:25:45

解决方案1
4 2011-06-14 17:23:42

解决方案2
4 2011-06-14 17:25:52

解决方案3
0 2011-06-14 19:25:45