固定位置高度大於瀏覽器窗口百分比

我想打開一個燈箱點擊一個元素。我已經給燈箱位置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/時，它正確地居中垂直和水平。 –

固定位置高度大於瀏覽器窗口百分比

回答

相關問題