Question

我正在使用以下JSFIDDLE来显示叠加层。但是，当显示它在覆盖层周围有一个边框，似乎创建一个更大的区域，因此将滚动条放在页面上，我无法弄清楚为什么会这样？

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

我搞砸了你的内容/身体填充物＆amp;利润率。另外，因为你绝对定位，你可以用百分比指定从上/下的距离，这样你就可以调整边框的大小：

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

JQuery重叠边框情况

3 个答案: