Question

我有100％宽度的标题和980px的标题和100％宽度的页脚。但页脚并没有停留在页面底部。它取决于联系div。请参阅下面的代码，如果编码有任何问题，请告诉我。

我搜索了所有帖子，但对我来说没什么用。如果你看到google.com的页脚，那它的屏幕分辨率总是在脚下。

     * {
            margin: 0px;
            padding: 0px;
        }

    body, html {
            position: relative;
            background-color: #fff;


height:100%;
    }

    .contents {
        position: relative;
        width: 980px;
              margin: 0 auto;
        background-color: red;
        clear:both;
    }

    /* Header of the page */
    .header {
        height:100px;
        width:100%;
        background-color:#000099;
    }

    /* footer of the page */ 
    .footer {
       clear:both;
       background:#6cf;
       position:absolute;
       bottom:0;
       width:100%;
       margin-top:5px;
       height : 100px;
    }

    <body>
    <div class="header">
    here is the header
    </div>

    <div class="contents">
    <p>Contents</p>
    </div>

    <div class="footer">
    <p>Footer</p>
    </div>

    </body>

Answer 1

让我们从头开始。这是我最喜欢的粘性页脚配方。改编自CSS Tricks

页脚独立于包装内容。它被有效地推出视口，然后被负边距拉高。无论你投入多少内容，它都会扩展到任何高度。

Endless content fiddle example

Basic idea fiddle

HTML

<div id="wrapper">
    <div id="header"></div>
    <div id="content"></div>
</div>
<div id="footer"></div>

CSS

html, body {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    font-family: Helvetica;
}
html, body {
    height: 100%;
}
#wrapper {
    min-height: 100%;
    width: 400px;
    margin: 0 auto;
    /* same height as footer */
    margin-bottom: -120px;
}
#wrapper:after {
    content:"";
    display: block;
}
#header {
    height: 200px;
    background: #FF0;
}
#footer, #wrapper:after {
    /* same height as wrapper negative margin */
    height: 120px;
}
#footer {
    background: #F00;
}

Answer 2

试试这个：

html, body {
    height: 100%;
    margin:0;
}
.header {
    height:100px;
    width:100%;
    background-color:#000099;
}
.contents {
    min-height: 100%;
    width: 980px;
    /* equal to footer height */
    margin-bottom: -100px;
}
.contents:after {
    content:"";
    display: block;
}
.site-footer {
    /* .push must be the same height as footer */
    height: 100px;
    width:100%;
}
.site-footer {
    background:#6cf;
}

的jsfiddle：

http://jsfiddle.net/EyGNp/2/

Answer 3

如果您希望页脚始终位于页面底部，而不是内容长于视口时显示的粘页脚，则可以使用calc（）计算内容的最小高度DIV。

.contents {
  position: relative;
  width: 980px;
  margin: 0 auto;
  background-color: red;
  clear:both;
  min-height: calc(100% - 205px);
}

这样做是将内容div的最小高度设置为其容器的100％，减去页眉和页脚的高度。因此，如果内容比视口强制将页脚强制到屏幕底部，则强制内容div增长。

这是 fiddle 。

页脚与不同宽度内容div的页脚

3 个答案: