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

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

css
  •  1
  • Salman Arshad  · 技术社区  · 14 年前

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

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

    1 回复  |  直到 13 年前
        1
  •  3
  •   Tatu Ulmanen    14 年前

    不管是不是个好主意,都取决于你——毕竟你是设计师。你唯一需要注意的就是你所有的内容都是可见的,页眉和页脚不会阻塞任何东西。通过将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 :

    <param name="wmode" value="opaque" />