代码之家 › 专栏 › 技术社区 › Salman Arshad

固定的页眉和页脚gotchas和建议

css

Salman Arshad · 技术社区 · 15 年前

我计划修改我的博客布局,这次我计划 position: fixed 页眉和页脚,都将高约40px。页眉将包含徽标和搜索按钮,页脚将包含许多项目,如订阅按钮、相关文章、跳转到顶部/注释/底部按钮等(列表未定稿)。

在我开始之前,我想知道是否有人能告诉我这是个好主意。如果你能指出最佳实践并找到答案,我也会很感激。页脚将包含相关文章的Facebook聊天风格弹出窗口和其他一些功能,所以我也想知道它是否能与此布局一起工作。也会有广告,所以这让我担心是否有可能有一个标题放在广告的顶部(特别是闪光广告)。将感谢链接到示例布局。

1 回复 | 直到 14 年前

Tatu Ulmanen 15 年前

不管是不是个好主意,都取决于你——毕竟你是设计师。你唯一需要注意的就是你所有的内容都是可见的,页眉和页脚不会阻塞任何东西。通过将padding设置为与页眉和页脚高度相对应的body元素,可以很容易地防止出现这种情况:

body {
    padding: 40px 0 50px 0;
}

#header {
    position: fixed;
    top: 0;
    height: 40px;
}

#footer {
    position: fixed;
    bottom: 0;
    height: 50px;
}

关于在Flash内容上显示元素;您的Flash元素必须 wmode 参数设置为 opaque :