将页脚放在页面底部?

时间:2017-09-07 20:15:15

标签: css

现在我的页脚始终位于页面底部。这是好的,直到我有更多的内容,而不是在页面上,这意味着当你向下滚动时,页脚向上滚动就好像它固定..

这是我的CSS:

   .footerWrap{
    clear: both;
    position:absolute;
    width:100%;
    bottom:0;
}

.footer {
    position: relative;
    margin-bottom: 0px;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    background-color: #000000;
    color: #FFFFFF;
}

.footerLinks{
    padding-left: 150px;
    text-align: left;
}
.footerLinks p {
    display: inline;
}

.footerLinks a {
    color: #169e98;
}

.footerSocial{
    text-align: right;
}

我的HTML:

<!--Footer-->
          <div class="footerWrap">
          <div class="footer">
              <div class="footerLinks">
              <a href="privacy.html">Privacy Policy</a><p> |</p>
              <a href="sitemap.html">Sitemap</a><p> |</p>
              <p>© 2017</p>
              </div>
              <div class="footerSocial">
                  <a href="https://www.facebook.com//" target="_blank"><img src="image/findfb.png" alt="Find us on Facebook"></a>
              </div>
            </div>
          </div>

基本上,我想将页脚Div放在文本内容之下。

1 个答案:

答案 0 :(得分:2)

很容易: 将您的HTML代码包装在

<div class="page">
 ...
</div>

然后添加css

.page{
 position:relative;
}

全部是

相关问题