Question

这个页脚将成为我的死亡。我必须要有回应，但现在它没有填充我的页面div的宽度。我尝试过auto，100％和inherit（它确实填充了宽度，但随后响应性被破坏了）。

我的CSS：

.page {
    width: 1100px;
    margin: 0 auto;
    height: 100%;
    padding-bottom:50px;
}
.footer {
  background-color: #277FD8;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: auto;
}

我的HTML：

    <footer class="footer">
        <div class="container-fluid">
            <div class="row">
              <a class="col-xs-12 col-md-2" href="{{var protoHost}}PrivacyPolicy">Privacy Policy</a>
              <a class="col-xs-12 col-md-2" href="{{var protoHost}}TermsOfService">Terms Of Service</a>
              <a class="col-xs-12 col-md-2" href="{{var protoHost}}AcceptableUsePolicy">Acceptable Use Policy</a>
              <a class="col-xs-12 col-md-2" href="{{var protoHost}}WarrentyAndReturnsPolicy">Warranty &amp; Returns Policy</a>
              <a class="col-xs-12 col-md-2" href="{{var protoHost}}ThridPartyCopyrightNotices">Third Party Copyright Notices</a>
              <a class="col-xs-12 col-md-2" href="{{var protoHost}}TermsOfServicePhone">Terms Of Service For Phone</a>
             <br><br><br>
            <p>&copy; 2016 Truespeed Internet Services - All Rights Reserved</p>
          </div>
        </div>
    </footer>

当我使用auto时，它只会很短。当我使用100％时，它会填充页面的宽度。

我现在做错了什么蠢事？

Answer 1

我将您的链接添加到.nav-justified列表中，该列表为您提供相同的行为，但语义标记更多。如果您希望查看我的完整页面视图，请转到This Code Pen，我使用的代码如下：

.page {
  width: 1100px;
  margin: 0 auto;
  height: 100%;
  padding-bottom: 50px;
}
.footer {
  background-color: #277FD8;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: auto;
  padding: 2px;
}
.footer .container-fluid {
  color: white;
}
.footer .container-fluid a {
  color: black;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<footer class="footer">
  <div class="container-fluid">
    <div class="row">
      <ul class="nav nav-justified">
        <li><a href="">Privacy Policy</a>
        </li>
        <li><a href="">Terms of Service</a>
        </li>
        <li><a href="">Acceptable use Policy</a>
        </li>
        <li><a href="">Warranty &amp; Returns</a>
        </li>
        <li><a href="">Dignissimos.</a>
        </li>
        <li><a href="">Third Party Copyright Notices</a>
        </li>
        <li><a href="">Terms Of Service For Phone</a>
        </li>
      </ul>
    </div>
    <div class="row">
      <p>&copy; 2016 Truespeed Internet Services - All Rights Reserved</p>
    </div>
  </div>
</footer>

Answer 2

尝试将left: 0;添加到.footer课程。 JSFiddle

Answer 3

您正在使用一个UI框架，该框架在其组件中内置了大量边距和填充。必须有适用于您无法看到的保证金。您可以尝试添加margin-left:0 !important;和margin-right:0 !important;

另一件事，使用绝对或固定定位可能会弄乱您的页面在移动设备上的显示方式 - 特别是当它们进入文本输入模式并且键盘将视口切成两半时。许多移动浏览器都不知道如何处理绝对定位。

Answer 4

尝试将left: 0，right:0和float: left添加到元素中。

页脚不是父Div的宽度

4 个答案: