Javascript HTML底部的空白_Javascript_Html_Css

Javascript HTML底部的空白

javascript html css

Javascript HTML底部的空白,javascript,html,css,Javascript,Html,Css,当我打开我的网页（下面的代码和链接）时，页面底部有一个间隙，使得页面的高度略高于100%，从而导致滚动条不必要地出现我知道以前有人问过这个问题，我已经看过了这个问题的几个答案，但我无法让它们中的任何一个起作用（但不要排除我做错了）。我不知道这个差距是由Javascript、CSS还是HTML造成的。我一直在摆弄CSS有一段时间了，似乎没有什么改变，所以如果你发现我错过了什么，请告诉我有趣的是，当打开和关闭窗帘的JavaScript运行时，滚动条消失了，但在结束后会立即重新出现下面是HTML

当我打开我的网页（下面的代码和链接）时，页面底部有一个间隙，使得页面的高度略高于100%，从而导致滚动条不必要地出现

我知道以前有人问过这个问题，我已经看过了这个问题的几个答案，但我无法让它们中的任何一个起作用（但不要排除我做错了）。我不知道这个差距是由Javascript、CSS还是HTML造成的。我一直在摆弄CSS有一段时间了，似乎没有什么改变，所以如果你发现我错过了什么，请告诉我

有趣的是，当打开和关闭窗帘的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>

如果您认为控制窗帘移动的引用JavaScript是导入的，您可以在中找到它

要查看问题的实际情况，请访问

这是我的第一个涉及JavaScript的项目，所以如果你看到我所做的有任何错误，也请提醒我

提前感谢。

在

正文

上添加

溢出：隐藏

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

编辑：另一个解决方案是添加

display:block到窗帘图像”。这似乎是真正的罪魁祸首。它还修复了IE 7：
.rightcurtain img, .leftcurtain img {
    display: block;
    height: 100%;
    width: 100%;
}

应该是
html
{
height:100%;
}

是“窗帘”容器的高度导致滚动条弹出。似乎您忘记了当“窗帘”的大小超过屏幕的高度时，“窗帘”会推动容器对象的“边框”（即它外面的div和它外面的body）。“最大高度”的问题在于，它的解释充其量只是粗略的
我建议您切换到99%而不是100%的窗帘值。这会让你的滚动条消失
当然，您也可以使用overflow属性；但是，如果某个内容超出了显示的宽度，它将不可见（因为“溢出”同时影响X和Y）。还有溢出-y，它只会影响y轴；但是，并不是所有浏览器都完全支持这一点。
如果您清理CSS，它可能会帮助您进行调试。您为许多元素设置了四次margin:0
。您还有下面Jrod指出的CSS语法错误。我真是个白痴，因为我没有发现这一点。非常感谢，先生@user798095：这只是通过简单地隐藏任何溢出屏幕的内容来掩盖问题，从而避免滚动条。如果你把窗口变小，而你实际上需要滚动条来显示，这就不好了。@Sparky-我谦虚地不同意。在body
上设置max height:100%
意味着开发人员试图阻止滚动条出现。强制该行为的唯一方法是隐藏溢出。然而，你是对的——虽然达到了预期的效果，但它并没有真正解决真正的问题。也就是说，到底是什么在将页面推到其边界之外？原来是标签。作为内联元素，它们忽略了边距指令。将其显示更改为阻止将修复此问题。我已经更新了我的答案。我有一个不同但相关的问题，第二部分解决了（设置显示：图像标签上的块）。谢谢这是一个非常好的建议——在我展示遮罩覆盖时，这个固定的白色间隙出现了一个微小的变化。我在三星Galaxy S3上使用Sencha Touch 1。令人惊讶的是，还修复了设备旋转后出现的类似的掩码大小问题-.x-mask{height:105%！important；overflow:hidden；}-非常感谢这篇文章。
html
{
height=100%;
}

html
{
height:100%;
}