如何在縮放時使頁面停留在頁面中？

Question

這裏是粘報頭的一個基本的例子：

#header { 
    position:fixed; 
    background-color: #CCE; 
    width: 500px; 
} 
... 
#content { 
    background-color: #EEE; 
    width: 500px; 
} 

頭是固定的，並且滾動下方的內容。與此相關的一個問題是，如果您縮放頁面（通常在移動瀏覽器上執行此操作），則即使向右滾動，標題的右側部分也不再可訪問。

撥弄我的例子在這裏：http://jsfiddle.net/76haM/（放大看到它在行動）

如何使粘頭說，「表現」好於放大，例如像這樣的：http://tzd-themes.com/gebo_admin/index.php?uid=1&page=dashboard

Answer 1

#header { 
    width: 500px; 
} 

由於變焦，標題的寬度會比屏幕寬，導致文本的：因爲你指定一個固定的寬度，這將無法正常工作脫落。

當你有一個基於百分比的寬度，你會得到與正確的元素更好的結果，因爲寬度將根據畫面適當調整：

#header { 
    width: 100%; 
} 

JSFiddle。