始终出现在顶部和完整底部的页眉和页脚答案

【问题标题】：header and footer that always appear at top and complete bottom始终出现在顶部和完整底部的页眉和页脚
【发布时间】：2010-10-29 18:20:38
【问题描述】：

我知道我可以只使用母版页，但是我应该在母版页上使用什么标记来始终使用一些 CSS 代码在顶部有一个页眉和一个在底部一直有一个页脚？

【问题讨论】：

【解决方案1】：

对于页脚：

它被称为粘性页脚。你可以谷歌它并找到一些（谷歌css sticky footer）。我喜欢这个one。

【讨论】：

【解决方案2】：

虽然我不太确定，但您的上下文是什么，通常您可以通过将 display:fixed 设置为页脚和页眉 id/class 并使用 bottom:0 作为页脚和 top:0 作为页眉来做到这一点。

您可能希望为两者都包含一个高 z-index，以便它们始终显示在最上层。

这个解决方案的问题是页面的实际内容滚动到这两个项目后面，并且可能不可读，因此您必须为两者调整顶部和底部 margin。

这是一个快速而肮脏的信息，可以帮助您入门，因为您没有在问题中提供更多详细信息。

【讨论】：

【解决方案3】：

使用position: fixed

所以标题可能是：

.header {
     position: fixed;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100px;
}

还有一个页脚：

.footer {
     position: fixed;
     bottom: 0px;
     left: 0px;
     width: 100%;
     height: 50px;
}

这将是一个 100 像素高的页眉和一个 50 像素高的底部页脚。注意position: fixed默认不支持IE6

【讨论】：