如何在缩放时使页面停留在页面中？

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。