固定位置高度比浏览器窗口大百分比

Fixed position height is bigger than browser window by percentage

本文关键字：窗口 百分比 浏览器 定位 位置 高度      更新时间：2023-11-09

我想在单击元素时打开一个灯箱。我已经将位置fixed赋予灯箱（只是id值固定的div）。这里灯箱id是js示例中的fixed

CSS

#fixed {
  position:fixed;
       margin:0 auto;
       width:50%;
       height:50%;
       background-color: red;
       display: none;
       z-index:9999999;
}
#left{
    float:left;
    width:30%;
}
#right{
    float:left;
    width:70%;
}

HTML

<div id="fixed">
    <div id="left">content</div>
    <div id="right">content</div>
</div>
<div id="check">
    Open
</div>
<div id="check2">
    close
</div>

我使用jQuery垂直居中对齐div

$(document).ready(function(){
    var winWidth=$(window).width();
    var winHeight= $(window).height();
    var divWidth= $('#fixed').width();
    var divHeight= $('#fixed').height();
    var top = (winHeight/2)-(divHeight/2);
    var left = (winWidth/2)-(divWidth/2);
     alert(winHeight);
    alert(divHeight);
    alert(top);
    $('#fixed').css('top',top);
    $('#fixed').css('left',left);
    $('#check').click(function(){
        $('#fixed').fadeIn(300);
    });
    $('#check2').click(function(){
        $('#fixed').fadeOut(300);
    });
});

上面的fiddle工作得很好，但与我在本地主机中使用的概念相同。那里的窗口大小比jsfiddle大。

div不是垂直居中对齐的。我收到div高度大小大于窗口高度大小的警报，所以它不是放在中心，而是放在底部。

这是我运行脚本时的警报值

798
950
-76

798是我认为的浏览器高度，950是div高度。最终的最高值是-76。

我对此一无所知，即使我已经在css中为lightbox（div）提供了50%的宽度和高度。

为什么我得到了更高的值？我想把它垂直居中，有人能帮忙吗？

我没有看到JSFiddle有任何错误——它正在为我垂直对齐加载。

我唯一的建议是将包含#fixed的元素的高度声明为100%。我认为这可能是本例中的身体元素。这样，固定的div肯定是100%的50%，而不是0%的50%，有些浏览器可能会将其设置为.

我还没有研究过Javascript代码。但由于width和height设置为50%，因此您可以将top和left定位在25%，无需计算

#fixed {
    position:fixed;
    top: 25%;
    left: 25%;
    width:50%;
    height:50%;
}

参见修改后的JSFiddle

相关文章：