粘性页脚和固定页眉[重复]答案

【问题标题】：sticky footer and fixed header [duplicate]粘性页脚和固定页眉[重复]
【发布时间】：2015-05-06 16:29:09
【问题描述】：

我已经在 google 上尝试了几种用于粘页脚的解决方案。我目前的测试工作正常，但如果内容溢出页面，页脚不会下推。

问题： 1. 内容溢出，页脚不会下推。内容多了怎么让它下推？

随着屏幕尺寸变小，标题高度不固定，因此导航与标题重叠。我应该如何调整我的标题，以便即使屏幕较小，标题也将保持与全屏模式相同？

css:

/* basic set up*/
.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #CCCC52;
    width: 100%;
    height: 6%;
}
.footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: blue;
    margin-bottom: 0;
}
/* header */
    .header p, .header ul, .header ul li {
        display: inline-block;
        *display: inline;
        zoom: 1;
    }
    .header p, .header ul {
        margin: 0.5% 0 0 0;
        padding: 0;
        width: 50%;
    }
        .header p {
            margin-left: 2%;
            width: 48%; 
        }
        .header ul {
            text-align: right;
            list-style-type: none;
        }
        .header ul li {
            margin: 0 5%;
            padding: 1.5% 2%;
            background-color: #e44c65;
        }

这是我到目前为止所得到的。小提琴 DEMO

附： **对不起，我忘了提，但我实际上必须支持 I.E. 7也一样。我知道......它很愚蠢......

附：我试图弄乱推荐的解决方案，但它的标头未固定或 I.E. 7 不支持(:在 IE 7 中不支持之后)

【问题讨论】：

好吧，你不应该如此依赖绝对位置。如果你这样做，你会在每一步都遇到这样的问题。 Here's a sticky footer method that I'd recommend 我自己通常使用几乎相同的方法。就固定标头而言，您只需设置 #header { position: fixed; } 就可以了
将footer 包裹在wrapper 中。

标签： html css

【解决方案1】：

  <div class="content">
   All content goes in here
 <\div>

 .content{
   Min-height:100%;
 }

你的第一个问题解决方案

【讨论】：

【解决方案2】：

问题：1

只需将<div class="footer"> 放入<div class="wrapper">

问题：2

您在 margin 和 padding 中使用 %。例如margin: 0.5% 0 0 0; 和height: 6%; 为.header。这可能会导致窗口调整大小出现一些问题。

编辑：

也许你想使用一些 html5？

有<header> 和<footer> 标签。因此，您不必对所有内容都使用 div。

注意 IE8 及以下版本。您需要进行一些修复才能在此处使用 html5 标记。

【讨论】：