2012-03-26 82 views
0

我有一個簡單的登錄框,它位於頁面中央(垂直和水平)。如何使元素不調整窗口大小/分辨率更改

在這裏你可以找到DEMO吧:

http://encodable.com/uploaddemo/files/login.html

問題是,每次我調整瀏覽器窗口手動的div#login-logout-box)的內容被調整大小,如果有人試圖查看這個登錄表單在瀏覽器窗口中,哪個高度低於380px,它應該向頁面添加滾動條。但是atm而不是那個盒子只是被切斷了。意思是在低分辨率下,這種形式是部分顯示無法滾動的能力:S(嘗試了幾款手機--Iphone和Android 2.3)

但我不希望那個div可滾動,但整個頁面。

我已經檢查www和stackoverflow的可能的答案,但沒有什麼,也很抱歉,如果問題不清楚,我已經盡力描述它。

+0

我不明白。如果你只是設置一個固定大小的元素,每當它溢出窗口時,滾動條就會自動出現......是不是你想要做的? – Sparky 2012-03-26 14:59:08

+0

@ Sparky672是的,正好。但是對於某些規則來說,它並不在Firefox和Opera中發生。 – ProDraz 2012-03-26 15:03:50

+0

它也不適用於Safari。 – Sparky 2012-03-26 15:28:10

回答

3

你的代碼不應該在任何瀏覽器中工作。根據W3C Spec,「固定位置大於頁面區域的框是剪輯」。

簡單地改變position: fixed;position: absolute;

#login-loguout-box { 
    width: 380px; 
    height: 380px; 
    position: absolute; 
    top: 45%; 
    left: 50%; 
    margin-left: -190px; 
    margin-top: -190px; 
    margin-bottom: 20px; 
    border: 2px solid #cacaca; 
}​ 

Working Code

Full Screen Demo

0

在css中使用overflow設置,例如,

overflow-x: auto; /* for horizontal scrolling*/ 
overflow-y: auto; /* for vertical scrolling */ 
+0

向其添加滾動條,爲true。但是當我們不需要滾動條時,我不希望滾動條只在瀏覽器分辨率很小的時候才需要它們來顯示整個表單。 – ProDraz 2012-03-26 14:32:39

相關問題