Question

我在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

P.S。 **对不起，我忘了提，但实际上我必须支持I.E. 7也是。我知道......这很愚蠢......

P.S。我试图搞砸推荐的解决方案，但其标题未修复或I.E. 7不受支持（：在I.E. 7中不予支持后）

Answer 1

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

 .content{
   Min-height:100%;
 }

您的第一个问题解决方案

Answer 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标签。

粘性页脚和固定标题

2 个答案: