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

我想打开一个灯箱点击一个元素。我已经给灯箱位置fixed（只是ID与固定值的div）。这里收藏夹标识是在js example 固定位置高度大于浏览器窗口百分比

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垂直

fixed

$(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的宽度和高度的50％（css中的灯箱（div）），我还没有任何想法。

为什么我获得更高的价值？我想垂直定位中心对齐任何人都可以帮忙吗？

来源

2013-11-26 sun

可能是一个CSS问题的DIV在如最小高度设置您的本地主机复制网站 –

CSS与我在本地的'＃fixed'相同，我也检查过它并没有在任何地方重新定义@A.Wolff谢谢 – sun

我的#fixed div #left和#right中的一些其他内容本地。这是一个问题吗？ @ A.Wolff – sun

我没有看到任何与JSFiddle的错误 - 它的加载垂直对齐我。

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

来源

2013-11-26 13:26:56

我应该给100％身高@Jonathon Blok – sun

我还没有看过Javascript代码。但是，既然你有width和height设置为50%，你可以定位top和left在25%，没有必要计算

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

了解改JSFiddle

来源

2013-11-26 13:36:45

我得到这个更早我试过它工作正常。我想知道设计中是否存在任何问题，因为在jquery计算中会出错。并且错误的对齐。那是问题吗？@Olaf Dietsche – sun

当我在Firefox 20或Chromium 25中测试http://jsfiddle.net/zT284/show/时，它正确地居中垂直和水平。 –

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

回答

相关问题