如何在缩放时制作一个留在页面中的粘性标题？

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