覆盖不是全高

Question

我已经检查了覆盖全高问题的一些答案，但没有正确的答案。

如何覆盖整个页面而不是其中的一部分，这很烦人。我做的高度等于100%。

覆盖是在jquery中完成的，但显然，css可以在css文件中完成。但为了简单起见...：

$('.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

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

这个html

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

希望这能有所帮助。

Answer 2

另一种可以克服一些令人讨厌的“间隙”问题的覆盖方法是使用这个绝对定位技巧：

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

这实际上会将其附加到视口的所有边，而不管大小：

示例：http://jsfiddle.net/6DKgb/2/

另外，不要忘记删除浏览器添加到正文中的默认填充。

Answer 3

body, html { height: 100% }

默认情况下，body不会填充所有垂直屏幕空间。所以你的叠加是它父级高度的100%，但那不是屏幕高度。