固定格子定位

我正在開發一個基本上具有三個divs標題，內容和頁腳的移動網站。我想要修正頁眉和頁腳，並且如果內容過多，可以滾動內容。現在我的CSS是：固定格子定位

#header{ 
    top: 0; 
    left: 0; 
    height: 8%; 
    width: 100%; 
    position: fixed; 
    text-align: center; 
    text-height:font-size; 
} 

#content{ 
    top: 8%; 
    left: 0; 
    bottom: 15%; 
    width: 100%; 
    position: fixed; 
    margin: 0; 
    padding: 0; 
    overflow: auto; 
    z-index: 0; 
} 

#footer{ 
    height: 15%; 
    width: 100%; 
    position: fixed; 
    text-align:center; 
    bottom: 0; 
    left: 0; 
    z-index: 1; 
}

這我有一些文本字段的內容，在移動設備上但完美的作品，當鍵盤彈出的頁眉和頁腳也得到推升使得內容領域太小。無論如何要保持它們的固定，但不要在輸入文字時將它們推高。

來源

2013-08-01 Ryan Sayles

-2

#content{ 
    top: 8%; 
    left: 0; 
    bottom: 15%; 
    **width: 100%;** 
    position: fixed; 
    margin: 0; 
    padding: 0; 
    overflow: auto; 
    z-index: 0; 
}

將此突出顯示的文本更改爲px值。％值根據您的瀏覽器大小調整對象。

來源

2013-08-01 13:34:16

改變寬度不會做任何事情來幫助我。我將不得不改變高度，如果我將高度設爲px值而不是％，那麼在具有不同屏幕尺寸的多個設備上它看起來不正確 –

你可以使用JavaScript的每一個文本框獲得焦點的時候，因爲一個事實，即網站變小隻是隱藏頁腳是硬編碼在操作系統（這是負責顯示鍵盤）

這可以使用jQuery來完成，或者移動甚至更好（因爲小）：zepto.js

希望幫助

來源

2013-08-01 13:39:51

固定格子定位

回答

相關問題