Question

我的页脚有问题。

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

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

这是实际的网页网址：http://www.bkd.com/new-test-2.htm

我需要让页脚与顶部的BKD标志保持一致。这是一个正常大小的屏幕，我希望它是全面的：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将显示在网页的中央。

Answer 2

以％而不是px提供保证金值。

页脚移动与更大的屏幕

2 个答案: