彈出DIV不是在屏幕上移動

中間我有兩個div彈出DIV不是在屏幕上移動

<div class="one">contains a massive image with fixed height and width</div> 
<div class="two">contains popup</div> 

.one { 
     background-image: url("image"); 
     background-position: left top; 
     background-repeat: no-repeat; 
     background-color: transparent; 

     height:900px; 
     width:1000px; 

     margin:0 auto; 
} 

.overlay { 
    background:rgba(0,0,0,0.8); 
    bottom:0; 
    left:0; 
    position:fixed; 
    right:0; 
    top:0; 
    z-index:4; 
    display: block; 
    opacity: 1; 

    } 

    .popupwrapper{ 
     background:white; 
     height: 100%; 
     max-width: 300px; 
     width: 100%; 
     max-height: 320px; 
     text-align: center; 
     padding:3em; 
     margin: 0 auto; 
     margin-top: 120px; 

     //for small screens 
     margin-left: 40px; 
    }

我的問題是，由於格「一」是一個固定大小時，我認爲它在移動電話中，彈出窗口實際上並不顯示在屏幕的中心，而是如何顯示在筆記本電腦的屏幕上。我已經嘗試使用在移動屏幕中間居中div的小屏幕上留下的邊距來修復此問題。然而，當我滾動，因爲div有一個空白，所以當我滾動時，它不會坐在中間。

此外，這似乎只發生在Safari（沒有margin-left或固定的最大寬度div似乎在手機屏幕上是巨大的），但在Chrome是好的？

兩個問題：

如何停止從滾動DIV？我嘗試過溢出，但它仍然滾動。
是否有一個只是Safari的CSS黑客？我嘗試了很多，但他們都沒有工作？

來源

2015-12-21 baconsandwich2

您是否使用了max-width：1000px –

@GauravRai我曾嘗試過，它對於手機屏幕來說太大了。出於某種原因，當我在我的iPhone上的Chrome中使用它時，彈出窗口完全適合iPhone屏幕，但是當我在Safari中使用它時，彈出窗口真的會放大或進行其他操作。 – baconsandwich2

Safari版本5.1+？ –

我明白你的問題，你想顯示一個覆蓋總是在屏幕中間和其餘的頂部。

如果模式的大小是固定的，那麼你可以做這樣的：

.one { 
    position: absolute; 
    top: 50%; 
    left: 50%; 

    margin: -450px 0 0 -500px; 

    width: 1000px; 
    height: 900px; 
}

例子：click

只有覆蓋的大小的方式大的移動設備。。也許使用媒體查詢在手機屏幕上有不同的大小？

來源

2015-12-21 11:44:28

我嘗試了你的建議，但它仍然滾動，而不是滾動比例:(出於某種原因，當我在我的iPhone上使用它的Chrome瀏覽器彈出窗口完全符合iPhone屏幕，但是當我在Safari中使用它時，彈出窗口實際上是放大了或者其他東西 – baconsandwich2

你可以控制移動設備如何處理你的應用程序的渲染，以下是移動設備中視口元的更多信息：https：// developer。 mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag –

可能是任何元素的高度大於其實際高度。這就是爲什麼滾動即將到來。

來源

2015-12-21 11:44:43

彈出DIV不是在屏幕上移動

回答

相關問題