持久页眉和页脚答案

【问题标题】：Persistent Header & Footer持久页眉和页脚
【发布时间】：2011-06-26 17:13:20
【问题描述】：

我有两个宽度为 100% 的 div。我希望一个始终处于所有内容的首位，而我希望第二个始终处于所有内容的底部。我怎样才能做到这一点？最好使用纯 CSS，但如果需要，我会尝试 jQuery/JS 解决方案。

我尝试使用 include("header.php"); 添加标题header.php 只包含标题的 HTML 代码。但是，它不起作用，但是将确切的代码代替 include 可以正常工作。我该如何解决这个问题？

【问题讨论】：

标签： html css header footer

【解决方案1】：

您可以从 position:fixed 开始并定义顶部和左侧属性或底部和左侧属性。

查看CSS sticky footer 时使用它（不推荐使用的链接）。

CSS 中引入了新的粘性定位。粘性定位元素被视为相对定位，直到它越过指定的阈值，此时它被视为固定，直到它到达其父元素的边界。使用固定和粘性定位，您可以实现始终位于其他所有内容之上的页眉和页脚。

粘性定位可能不适用于最终用户可能使用的所有浏览器版本。要在旧浏览器中实现粘性页脚，请检查How to make a sticky footer using CSS?

【讨论】：

看起来 www.cssstickyfooter.com 不再可用。可能想对那个链接做点什么......
CSS 对粘性元素的支持在过去 6 年中得到了改进。 CSS 目前支持 position:sticky 开箱即用。支持定位by the latest browser versions。要支持较旧的浏览器版本，您可能会被建议检查粘性页脚stackoverflow.com/questions/29069498/… 上的后续 stackoverflow 问题。感谢您花时间指出一个不推荐使用的答案！

【解决方案2】：

使用位置：固定和顶部或底部Example。

<head>
    <title>Example</title>
    <style>
#top {
    color: white;
    width: 100%;   
    background-color: black;

    top:0px;
    position: fixed;   
}

#bottom {
    color: white;
    width: 100%;   
    background-color: black; 

    bottom:0px;
    position: fixed;   
}

#content {
    padding-top: 10px;   
}
    </style>
</head>

<body>
    <div id="top">top header</div>

    <div id="content">content</div>

    <div id="bottom">bottom footer</div>
</body>

- 记住

...Flash 应用程序通常会出现在这样的元素上。要解决此问题，请使用 objects/embedd 中的 wmode="transparent" 属性。 示例：

<object>
    <param name="movie" value="example.swf" /> 
    <param name="wmode" value="transparent" /> 
    <embed src="example.swf" wmode="transparent"></embed>
</object>

【讨论】：