垂直居中後滾動不正確

所以我有一個問題，設置位置後：absolute; top: 50%; margin-top: -310px爲我的主要內容。問題是當我最小化瀏覽器窗口並且出現垂直滾動時，佈局的頂部被隱藏。我的意思是：http://jsfiddle.net/95Uzt/15/。您可以看到菜單和聯繫表單，但表單上方的標題不可見/被瀏覽器覆蓋。哪裏不對？垂直居中後滾動不正確

來源

2012-12-10 IAMNEW

當視口的高度小於620像素時（這樣-310像素位於視口高度的50％以上）時會發生這種情況。你如何解決這個問題取決於你實際想要做什麼。 –

我希望內容在每個瀏覽器中或多或少都是垂直居中（這就是爲什麼我使用top：50％和margin-top：-310px），但我也需要它正確滾動。我怎麼能解決這個問題？ – IAMNEW

我想你想用一段代碼來處理兩個案例，而這只是不起作用。你將需要使用某種條件代碼來處理這兩種情況。

你兩種情況：

對於視口超過620個像素，則需要到中心內容
對於視小於620個像素，你需要的內容頂部對齊。

對於支持更現代的瀏覽器，你可以考慮使用CSS：

@media screen and (max-height: 620px) { 
    .content 
    { 
    top: 0px; 
    margin-top: 0px; 
    } 
}

如果您需要更廣泛的瀏覽器支持，你需要使用JavaScript，我想。

來源

2012-12-10 13:26:29

這正是我需要的。問題解決了，非常感謝！ – IAMNEW

垂直居中後滾動不正確

回答

相關問題