over 1 year ago

footer会根据页面而动,为了让footer固定在页面的底部,进行以下配置:

HTML结构:

<body>
        <main></main>
        <footer>
          <div class="container-2">
              <div class="row">
                  <div class="col-lg-12">
                      <ul class="list-inline">
                          <li>
                              <a href="/">Home</a>
                          </li>
                          <li class="footer-menu-divider">&sdot;</li>
                          <li>
                              <a href="/about/">About</a>
                          </li>
                          <li class="footer-menu-divider">&sdot;</li>
                          <li>
                              <a href="#portfolio">Portfolio</a>
                          </li>
                          <li class="footer-menu-divider">&sdot;</li>
                          <li>
                              <a href="#contact">Contact</a>
                          </li>
                      </ul>
                      <p class="copyright text-muted small">Luck Dog Web Made In 2017. All Rights Reserved</p>
                      <p>Welcome to view and share</p>
                  </div>
              </div>
          </div>
        </footer>
    </body>
    

CSS设置:

html{height:100%;}
body{min-height:100%;margin:0;padding:0;position:relative;}
main{padding-bottom:100px;}/* main的padding-bottom值要等于或大于footer的height值 */
footer{position:absolute;bottom:0;width:100%;height:100px;}

首先,设置body的高度至少充满整个屏幕,并且body作为footer绝对定位的参考节点;
其次,设置main(footer前一个兄弟元素)的padding-bottom值大于等于footer的height值,以保证main的内容能够全部显示出来而不被footer遮盖;
最后,设置footer绝对定位,并设置height为固定高度值。

感谢阅读这篇文章,如果您喜欢以上功能,欢迎为我的作品点赞鼓励!

“Lucky Dog”是我和隋璐同学一起制作的网站。这是一个萌宠出售平台,旨在为客户带去温暖的陪伴。如果你喜欢我们的网站,请投上您宝贵的一票。

https://fullstack.xinshengdaxue.com/works/203

← 适合小白的商店魔改教程1--增加商品评论功能 20170220 →
 
comments powered by Disqus