JQuery 오버레이 경계 상황

Question

오버레이를 표시하기 위해 다음과 같은 JSFIDDLE을 사용하고 있습니다. 그러나 표시 될 때 오버레이 주위에 테두리가 있고 더 큰 영역을 만들어 페이지에 스크롤 막대를 배치하는 것처럼 보이며 그 이유를 알 수 없습니까?

는

$('.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은 다음과 같습니다 :

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

JS 코드는

<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입니다. 내가 콘텐츠/몸 패딩 & 마진 주위 엉망

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

Answer 2

상단을 추가해야합니다. 0; 왼쪽 : 0; 귀하의 #overlay CSS에 추가하십시오.

Answer 3

: 문제는 우리가 그것을 자신을 설정, jQuery를이 (이러한 조건에서) 잘못된 크기를 설정합니다, 그래서. 당신이 절대적으로 배치하고 있기 때문에, 당신은 위로부터의 거리를 지정할 수/비율 왼쪽 응답하여 크기를 조절하면 테두리가있어 너무 :

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