覆盖不全高

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

如何使覆盖层覆盖整个页面而不是覆盖整个页面，这很烦人。而我正在做的高度等于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(); 
});

来源

2011-03-11 Shaoz

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>

希望这会有所帮助。

来源

2011-03-11 17:38:12

但是当我使用的$（document）.height（），有叠加框和页面底部之间小的差距。我不想要差距... – Shaoz

你是否将身体或html高度设置为100％？如果是这样的话。 –

也有你隐藏溢出？小的gep可能是滚动条的位置。 –

body, html { height: 100% }

body默认情况下不会填满所有垂直屏幕空间。所以你的覆盖层是它父母的高度的100％，但这不是屏幕高度。

来源

2011-03-11 17:40:46

这样做往往可以克服一些讨厌的“差距”的问题覆盖另一种方法是使用绝对定位的技巧：

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

这将基本上将其连接到视口的各方面，无论大小：

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

也不要忘了删除被浏览器添加到身体的默认填充。

来源

2011-03-11 17:52:16

直接修复magnific_popup.js updateSize函数。添加以下内容：

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

来源

2015-06-23 09:56:29

试试这个太

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

来源

2017-02-24 05:09:26

回答

相关问题