html - 页脚随屏幕变大而移动

Question

我的页脚有问题。

它在普通屏幕尺寸、平板电脑和手机上看起来很棒，但对于拥有更大屏幕/分辨率的用户来说，页脚会一直向左移动。

在此处查看大屏幕屏幕截图:http://www.bkd.com/images/bkd-big-screen.png

这是实际的页面 URL:http://www.bkd.com/new-test-2.htm

我需要页脚与顶部的体验 BKD Logo 对齐。这是在正常尺寸的屏幕上，我希望它全面:http://www.bkd.com/images/bkd-normal-screen.png

这是页脚的代码:

   <div id="footer3">

   <div id="footer3-contents">
   <div class="span-6">
   <a href="https://www.facebook.com/BKDcpasandadvisors?ref=ts"><img width="23" height="25 alt="BKD Facebook" src="/images/icons/social-media/facebook-icon.png"></a>
   <a href="https://www.linkedin.com/company/bkd-cpas-&-advisors?trk=biz-companies-cym"><img width="25" height="25" alt="BKD LinkedIn" src="/images/icons/social-media/linkedin-icon.png" id="icons"></a>
   <a href="https://twitter.com/bkdllp"><img width="25" height="25" alt="BKD Twitter" src="/images/icons/social-media/twitter-icon.png" id="icons"></a>

   <a href="https://www.youtube.com/user/experienceBKD"><img width="25" height="25" alt="BKD Youtube"src="/images/icons/social-media/youtube-icon.png" id="icons"></a>
  <a href="https://plus.google.com/+BkdCPAsandadvisors/posts"><img width="25" height="25" alt="BKD Google Plus" src="/images/icons/social-media/google-icon.png"></a>



   </div>
   <div id="footer-legal" class="span-18 last">

   <ul>
   <li><a href="/contact-us/">Contact Us</a></li>
   <li><a href="/about-us/terms-of-use.htm">Terms of Use</a></li>
   <li> <a href="/about-us/privacy-policy.htm">Privacy Policy</a></li>
   <li> <a href="/about-us/disclosures.htm">Disclosures</a></li>
   <li> <a href="http://ultipro.bkd.com/">UltiPro</a></li>
   <li style="color:#fff">Copyright © 2014 BKD, LLP.</li>


   </ul>
   <a href="/about-us/praxity/"><img src="/images/praxity-white.png" width="101" height="47"></a>
   </div><div class="clear"></div>
   <div class="clear"></div></div></div><!--end footer -->




   </body>
   </html>

CSS:

    /*footer */
    #footer3 {padding:36px 0px; background: url(/images/common/footer/footer-black.png); background-repeat:text-align:left; width: auto; font-size:14px; font-weight:normal;}
    #footer3-contents { margin:10px; width: auto; padding-left: 95px;}
    #footer3 h2 { color:#fff;  font-size:12px; padding-left:0px; }
    #footer3 h2 a { color:#fff; }
    #footer3 a { color:#fff; }
    #footer3 #footer-legal ul { padding: 0px; margin:0px 0px 0px 0px;}
    #footer3 #footer-legal ul li {float:left; padding: 10px 10px 2px 0px;}
    #icons {padding-right:4px;}

预先感谢您的帮助。

Answer 1

#footer3-contents {
    margin: 0 auto;
    width: 1000px;
}

将#footer3-contents 更改为上面的内容，它将起作用。

发生此问题的原因是因为您所做的一切都是在原始代码中将页脚推到 95px 以上。您需要做的是为页脚内容设置一个定义的宽度，然后将每边的边距设置为相等。

如果两边边距相等，则 div 将出现在网页的中央。