Question

当我打开我的网页（下面的代码和链接）时，页面底部有一个间隙，使页面高度略高于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>

这是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; 
}

如果您认为用于控制窗帘移动的引用JavaScript是导入的，您可以在http://www.osholt.co.uk/concepts/jquery.easing.1.3.js找到它。

要查看问题，请转到http://www.osholt.co.uk/concepts

这是我的第一个涉及JavaScript的项目，所以如果你发现我所做的事情有任何问题，请提醒我。

提前致谢。

Answer 1

在overflow: hidden上添加body。

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

Answer 2

html
{
height=100%;
}

可能应该

html
{
height:100%;
}

Answer 3

“窗帘”容器的高度导致滚动条弹出。你似乎忘记了当它们的尺寸超过屏幕的高度时，“窗帘”将推动容器对象的“边界”（即它外部的div和身体之外的那个）。 max-height的问题在于它的解释充其量只是粗略。

我建议您切换到窗帘值的99％而不是100％。这会使你的滚动条消失。

当然，您也可以使用overflow属性;但是，如果某些东西超出了显示器的宽度，它将不可见（因为“溢出”会影响X和Y）。还有溢出-y，它只会影响y轴;但是，并非所有浏览器都完全支持它。

HTML底部的空白区域

3 个答案: