类似Facebook的标题/顶栏

时间:2012-08-02 02:08:53

标签: html css

我一直试图用一些CSS来构建这个类似Facebook的顶栏(或标题,我不知道)。我认为这很容易,而且确实是第一批结果。

我已将栏设置为fixed位置,其topleft属性设置为0.其padding设置为4px而且效果很好;就像我想要的那样。

但现在的问题是......内容怎么样?我可以简单地将它包裹在<div>内并相对地将它放置在它的底部几个em。但是,如果超出浏览器的最大高度,它是否会隐藏内容的底部?而且,这可能导致某些尺寸与某些浏览器不兼容(我讨厌IE)。

我很抱歉,如果这里已经有人问我,我找不到这样的问题。更清楚的是,我不希望任何有类似的“动态更新”标题 - 至少现在还没有。我想我可以用一些HTML5来做到这一点。

这里的主要问题是:做这种标题的最佳方法是什么? position: fixed是真正的方法吗?如果是这样,显示内容的最佳方式是什么?

TIA,André

1 个答案:

答案 0 :(得分:2)

position:fixed会这样做。

简单地在内容的顶部添加边距。 (与标题的高度相同。)

因此,当您位于页面顶部时,您的标题将覆盖边距。向下滚动时,它将按预期运行。浏览器不会隐藏底部部分。