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

Question

这是粘性标题的基本示例：

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

标题是固定的，下面的内容滚动。这样做的一个问题是，如果您缩放页面（您经常在移动浏览器上这样做），即使您向右滚动，也无法再访问标题的右侧部分。

在这里摆弄我的例子：http: //jsfiddle.net/76haM/（放大查看它的实际效果）

如何制作一个在缩放时表现良好的粘性标题？

Answer 1

这将不起作用，因为您指定了固定宽度：

#header {
    width: 500px;
}

因为缩放，页眉的宽度会比屏幕宽，导致文字脱落。

当你有一个基于百分比的宽度时，你会用正确的元素得到更好的结果，因为宽度会根据屏幕正确调整大小：

#header {
    width: 100%;
}

JSF中。