Question

我之前一直在这样做，但这次是页脚不粘的问题。页脚和内容之间也存在巨大差距，卷轴即将出现。谢谢。

header,
nav,
article,
section,
footer,
figure,
aside {
  display: block;
}

html,
body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
  font-family: 'Ubuntu', 'Source Sans Pro', sans-serif!important;
  background-image: url('../img/noiseBack.png');
}

* html #outer {
  /* ie6 and under only*/
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  font-size: 100%;
  font-weight: normal;
  line-height: 18px;
  font-family: 'Ubuntu', 'Source Sans Pro', sans-serif!important;
  -webkit-font-smoothing: antialiased;
  -webkit-font-smoothing: subpixel-antialiased;
  word-wrap: break-word;
  text-shadow: 0 0 1px transparent;
  -webkit-text-size-adjust: 100%;
  background-image: url('../img/noiseBack.png');
  background-attachment: fixed;
  overflow-x: hidden;
  position: relative;
  min-height: 100%;
}

.container {
  width: 100%!important;
  padding: none;
  height: 100%;
  min-height: 100%;
  overflow: auto;
}

#wrapper {
  width: 995px;
  height: 100%;
  position: relative;
  margin: 0 auto;
  background-color: #fff;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  padding-bottom: 442px;
  clear: both;
}

#wrapper:after {
  content: "";
  display: block;
}

#container {
  position: relative;
  width: 100%;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  padding-bottom: 442px;
}

#content {
  margin: 0 20px 30px 20px;
}

#footer {
  background-color: #3f3f3f;
  color: #fff;
  width: 100%;
  height: 442px;
  position: relative;
  bottom: 0;
  clear: both;
}

<div id="container">
  <div id="wrapper">
    <div id="content">
      afdadfadfafadfa
    </div>
  </div>
</div>
<div id="footer">
  dfafadfadfadfad
</div>

粘性页脚不起作用。有一个很大的空间和滚动条

Answer 1

您将footer定义为position: relative;，因此它永远不会＃34;坚持＆＃34;到页面底部。

相反，请将footer更改为position: fixed;：

#footer {
  background-color: #3f3f3f;
  color: #fff;
  width: 100%;
  height: 442px;
  position: fixed;
  bottom: 0;
  clear: both;
}

此外，CSS中有很多不必要的属性，例如height=100%', min-height`等。

使用这个完整的CSS：

header, nav, article, section, footer, figure, aside {
    display: block;
}
html, body {
    min-height: 100%;
    margin: 0;
    padding: 0;}
html {
    font-family:'Ubuntu','Source Sans Pro', sans-serif!important;
}
* html #outer {/* ie6 and under only*/
    height:100%;
}
body {
    margin: 0;
    font-weight: normal;
    line-height: 18px;
    font-family:'Ubuntu','Source Sans Pro', sans-serif!important;
    -webkit-font-smoothing: antialiased;
    -webkit-font-smoothing: subpixel-antialiased;
    word-wrap: break-word;
    text-shadow: 0 0 1px transparent;
    -webkit-text-size-adjust: 100%;
    background-image: url('../img/noiseBack.png');
    background-attachment: fixed;
    overflow-x: hidden;
    position: relative;
}
.container {
    width:100%!important;
    padding: none;
    overflow: auto;
}
#wrapper {
    width:995px;
    margin: 0 auto;
    background-color: #fff;
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    padding-bottom: 442px;
    clear: both;
}
#wrapper:after {
    content: "";
    display: block;
}
#container {
    position: relative;
    width: 100%;
    display: block;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    padding-bottom: 442px;
}
#content {
    margin: 0 20px 30px 20px;
}
#footer {
    background-color: #3f3f3f;
    color: #fff;
    width: 100%;
    height: 300px;
    position: fixed;
    bottom:0;
    clear: both;
}

Answer 2

请参阅以下更新的代码。

header,
        nav,
        article,
        section,
        footer,
        figure,
        aside {
            display: block;
        }

        html,
        body {

            margin: 0;
            padding: 0;
        }

        html {
            box-sizing: border-box;
            font-family: 'Ubuntu', 'Source Sans Pro', sans-serif!important;
            background-image: url('../img/noiseBack.png');
            min-height: 100%;
             position: relative;
        }

        * html #outer {
            /* ie6 and under only*/
            height: 100%;
        }

        body {
            margin: 0;
            height: 100%;
            font-size: 100%;
            font-weight: normal;
            line-height: 18px;
            font-family: 'Ubuntu', 'Source Sans Pro', sans-serif!important;
            -webkit-font-smoothing: antialiased;
            -webkit-font-smoothing: subpixel-antialiased;
            word-wrap: break-word;
            text-shadow: 0 0 1px transparent;
            -webkit-text-size-adjust: 100%;
            background-image: url('../img/noiseBack.png');
            background-attachment: fixed;
            min-height: 100%;
            padding-bottom: 50px;
        }

        .container {
            width: 100%!important;
            padding: none;
            height: 100%;
            min-height: 100%;
            overflow: auto;
        }

        #wrapper {
            width: 995px;
            height: 100%;
            position: relative;
            margin: 0 auto;
            background-color: #fff;
            -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
            -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
            clear: both;
        }

        #wrapper:after {
            content: "";
            display: block;
        }

        #container {
            position: relative;
            width: 100%;
            display: block;
            height: 100%;
            margin: 0;
            padding: 0;
            border: 0;
        }

        #content {
            margin: 0 20px 30px 20px;
        }

        #footer {
            background-color: #3f3f3f;
            color: #fff;
            width: 100%;
            height: 50px;
            position: absolute;
            bottom: 0;
            clear: both;
        }

粘性页脚不工作。有一个很大的空间和滚动条

2 个答案: