Наложение не во всю высоту

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

Другой метод для наложения, который часто может преодолеть некоторые досадные проблемы "пробелов", состоит в том, чтобы использовать этот трюк абсолютного позиционирования:

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

, который по существу прикрепит его ко всем сторонам порта представлениянезависимо от размера:

пример: http://jsfiddle.net/6DKgb/2/

Также не забудьте удалить отступ по умолчанию, который добавляется в тело браузером.

Answer 2

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 3

body, html { height: 100% }

body не заполняет все вертикальное пространство экрана по умолчанию.Таким образом, ваш оверлей составляет 100% от высоты родительского элемента, но это не высота экрана.

Answer 4

попробуй тоже

$(".overlay").css({
   position:fixed,
   top:0px,
   bottom:0px,
   width:100%
});

Answer 5

Исправлено непосредственно в функции updateSize magnific_popup.js. Добавить следующее:

mfp.bgOverlay.css({
  height: _document.height(),
});