JQuery覆盖边界情况

Question

我有以下JSFIDDLE，我正在努力显示覆盖。然而，当显示它有一个边框周围的边框，似乎创建一个更大的区域，因此将滚动条放在页面上，我不明白为什么这是？

http://jsfiddle.net/Tnjew/2/

JS代码是：

$('.link').live('click',function(event){ 
    event.preventDefault(); 
    var $this = $(this), 
     $overlay = $('#overlay'); 

    $overlay.fadeIn(); 
}); 

$('#overlay').live('click',function(event){ 
    event.preventDefault(); 
    var $this = $(this), 
     $overlay = $('#overlay'); 

    $overlay.fadeOut(); 
}); 

的HTML是：

<div id="overlay"><span><br /><br /><br /><br /><br /><br /><br />Click again to close overlay</span></div> 

<div id="content"> 
    This is just a demo of this overlay 
    <a class="link">Click HERE to show overlay</a> 
</div> 

而CSS是：

#overlay { 
    position:absolute; 
    width:100%; 
    height:100%; 
    background-color:rgba(255,255,255,0.8); 
    text-align:center; 
    z-index:999; 
    display:none; 
} 

#overlay span { 
    text-align:center; 
    z-index:1001; 
} 

body {background-color: #000; color: #fff;} 

我错过了什么（或需要拿出）？谢谢！

Answer 1

只需添加：

html, 
body{ 
    padding:0px; 
    margin:0px; 
} 

到你的CSS，这里的修改fiddle。

注意：保证金是大多数浏览器的关键，并且填充与边距相结合可以获得其余部分。

边注意：这实际上是您需要为大多数页面执行的操作之一，以使它们在各种浏览器中显示相同的内容。

编辑：

这里有一个fiddle能解决这一点。问题是jQuery的设置大小错误（在这些条件下），所以，我们用它设置自己：

document.getElementById('overlay').style.height = window.getComputedStyle(document.getElementById('content')).height; 

Answer 2

您需要添加top：0;左：0;到你的#overlay CSS。

Answer 3

我与您的内容/体填充&利润率搞砸左右。也因为你绝对定位，你可以指定从顶部的距离/留下百分比所以你边境响应调整大小：

http://jsfiddle.net/jmwBW/

#overlay { 
    position: absolute; 
    width:98%; 
    height:98%; 
    background-color:rgba(255,255,255,0.8); 
    text-align:center; 
    z-index:999; 
    display:none; 
    margin: auto; 
    padding: 0; 
    vertical-align: center; 
    top: 1%; 
    left: 1%; 

} 

#overlay span { 
    text-align:center; 
    z-index:1001; 
} 


#content{ 
    padding: 0; 
    margin: 0; 
} 

body { 
    background-color: #000; 
    color: #fff; 
    margin: 0; 
    padding: 0; 
}