Question

我想点击一个元素打开一个灯箱。我已将位置fixed提供给灯箱（只是固定了id值的div）。此灯箱ID在js example

中为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 来垂直居中对齐

$(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);
    });
});

以上小提琴工作正常，但我在本地主机中使用相同的概念。窗口大小比jsfiddle大。

div不是垂直对齐的中心。我得到div高度尺寸大于窗户高度尺寸的警报，所以它不是放在中心位于底部。

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

798
950
-76

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

我对此没有任何想法，即使我已经为css中的灯箱（div）提供了50％的宽度和高度。

为什么我获得更高的价值？我想将它垂直放置在中心对齐，任何人都可以帮忙吗？

Answer 1

我没有看到JSFiddle有任何错误 - 它是为我垂直对齐的。

我唯一的建议是将包含#fixed的元素的高度声明为100％。我想在这种情况下可能是body元素。这样固定div肯定是100％的50％，而不是0％的50％，有些浏览器可能会将其设置为。

Answer 2

我没有查看过Javascript代码。但是，由于您将width和height设置为50%，您可以将top和left置于25%，无需计算

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

请参见修改后的JSFiddle

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

2 个答案: