Overlay not in full height

Question

I've checked some answers for the overlay full height problem, but there's no proper answers.

How do you make an overlay to cover the whole page instead of part of it, which is annoying. And I'm doing height equals to 100%.

The overlay is made in jquery but obviously, the css can be done in a css file. But for the sake of simplicity...:

$('.overlay-test').click(function(e){
  $('#ovelay-box').load('overlay.html', function(response){
    $('#ovelay-box').css({
        "opacity": 0.5,
        "background": "#333",
        "height": $('body').height(),
        "position": "absolute",
        "width": "100%",
        "top": 0,
        "color": "#333",
        "font-size": "26px",
        "font-weight": "bold"
    });

    $('.overlay').addClass('col-12-box').css({
        "width": "770px",
        "left": "129px",
        "background": "#fff",
        "padding": "20px",
        "position": "absolute",
        "top": "50px"
    });
});
e.preventDefault();
});

Answer 1

the jquery

var docHeight = $(document).height();
var docWidth = $(document).width();

$("body").append("<div class='overlay'></div>");

$(".overlay").css({
    "height":docHeight,
    "width":docWidth
});

$(".showOverlay").click(function(e){
    e.preventDefault();
    $(".overlay").fadeTo("slow",0.8);
});

thc css

.overlay {
    background:#000;
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}

the html

<a href="#" class="showOverlay">show overlay</a>

hope this helps.

Answer 2

Another method for doing the overlay that can often overcome some of the pesky "gap" issues is to use this absolute positioning trick:

#overlay{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom:0;
    background-color: red;
}

Which will essentially attach it to all sides of the view port regardless of size:

example: http://jsfiddle.net/6DKgb/2/

Also don't forget to remove the default padding that gets added to the body by the browser.