Question

因此，我的身体设置为1140px，但是，我希望页脚在屏幕上伸展。我搞砸了那么多代码，但是，我似乎无法弄清原因是什么。我在网上做了很多研究，大多数人似乎都建议使用margin：0；但这似乎也没有帮助。

这背后隐藏着太多的代码，似乎其他东西正在使它混乱。

footer {
  background-color: #333;
  width: 100%;
  height: 320px;
  position: relative;
}

.footer-body {
  background-color: #333;
  width: 60%;
  height: 320px;
  margin-left: 22%;
  padding: 10px 0px 10px 20px;
  position: relative;
  color: #FFF;
  font-family: 'Raleway', sans-serif;
}

footer p {
  line-height: 20px;
  margin: 10px 10px 0px 0px;
}

.map-address {
  margin-top: 21px;
  margin-bottom: 30px;
}

.footer-links {
  color: #FFF;
  font-size: 12px;
}

.widgetarea {
  width: 100%;
  text-align: center;
}

<footer>
  <!--<div class="row">-->
  <!-- Info Widget Start -->
  <div class="footer-body">
    <div class="col-lg-3  clearfix custom1" style="margin-top: 15px;">
      <span style="font-size: 32px; font-weight: bold; color: #FFF;">ThanksOffice</span><span style="font-size: 32px; font-weight: bold; color: #ebb621;">.com</span>
      <p style="font-size: 13px; line-height: 18px; color: #FFF;">ThanksOffice is a new concept of office space-sharing. Through ThanksOffice, everybody can share their unused spaces with flexible time-based options and also make a profit for sharing ThanksOffice with others</p>

    </div>

    <!-- Maps Widget Start -->
    <div class="col-lg-4 col-sm-6 clearfix responsive-big-margin custom2">
      <div class="map-address">
        <span style="font-weight: bold; color: #fff; font-size:20px;">Contact Information</span><br>
        <p>
          <span style="color: #ebb621; font-weight: bold; font-size: 13px;">AddR:</span>&nbsp;<span style="color: #FFF; font-size: 13px;">3235 Satellite Blvd Bldg 400 Suite 290, Duluth, GA 30096</span>
          <span style="color: #ebb621; font-weight: bold; font-size: 13px;">Email:</span>&nbsp;<span style="color: #FFF; font-size: 13px;">support@thanksoffice.com</span><br /><br />
        </p>
        <a href="https://www.facebook.com/tmpospro/?view_public_for=152376381930187" target="_blank">
          <img src="/images/icon_facebook_white.png" width="20" style="margin-right: 20px;"></a>
        <a href="https://www.instagram.com/tmposthanks/" target="_blank">
          <img src="/images/icon_instagram_white.png" width="20" style="margin-right: 20px;"></a>
        <a href="https://twitter.com/TMPOSTHANKS" target="_blank">
          <img src="/images/icon_twitter_white.png" width="20" style="margin-right: 20px;"></a>
        <a href="https://www.pinterest.com/tmposthanks/" target="_blank">
          <img src="/images/icon_pinterest_white.png" width="20" style="margin-right: 20px;"></a>
        <a href="https://www.youtube.com/channel/UCJGBaNOR3Y_ngsH4YoM-weg/featured?view_as=public/" target="_blank">
          <img src="/images/icon_youtube_white.png" width="20" style="margin-right: 20px;"></a>
      </div>
    </div>
    <!--<div class="widgetarea">-->

    <!--</div>-->
    <!-- Maps Widget End -->
    <center>
      <p class="footer-links">
        <a target="_blank" href="/pdf/TERMS_OF_USE.pdf" style="font-size: 12px;">Terms of Use</a> |
        <a target="_blank" href="/pdf/TXO-Privacy_Policy_Ver_1.0.1.pdf" style="font-size: 12px;">Privacy Policy</a> |
        <a target="_blank" href="/pdf/Anti-Spam_Policy.pdf" style="font-size: 12px;">Anti-Spam Policy</a> |
        <a target="_blank" href="/pdf/Electronic_Signature_Consent.pdf" style="font-size: 12px;">Electronic Signature Consent</a> |
        <a target="_blank" href="/pdf/VR_NOTICE_TO_REPORT_USERS.pdf" style="font-size: 12px;">FCRA Agreement</a> |
        <a target="_blank" href="/pdf/ThanksOffice.com_FAQ_Ver1.2.pdf" style="font-size: 12px;">FAQ</a> |
      </p>
      <p><span style="color: #fff;">&copy <%=DateTime.Now.Year%> TMPOS Inc. All rights reserved. <br />Powered by ESolutionTG</span></p>
      <!--</div>-->
  </div>
  </div>

Answer 1

设置footer {position: absolute}

它使您的页脚脱离html元素流，并且正文的宽度对此没有影响。

Answer 2

我不确定您要达到的确切效果，但也许尝试在width: 100%; text-align: center;中添加margin-left: 22%并删除.footer-body

Answer 3

您似乎没有关闭<center>标签：

<!-- Maps Widget End -->
<center>

我认为“ <％--％>”是模板引擎的一部分，但是我删除了它们（不是内部的HTML标记），并在codepen上对其进行了尝试。

如果您固定了<body>的宽度，则加上Ercan Peker的建议。

Answer 4

就像其他人建议的那样，您可以使用 position 属性将页脚元素从任何包含的父级中移除。

footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100vw; /* Make your footer span across the entire viewport */
}

我似乎无法让我的代码位于页脚中心并在屏幕上延伸

4 个答案: