页脚不是父Div的宽度

时间:2016-05-27 21:07:12

标签: html css twitter-bootstrap-3

这个页脚将成为我的死亡。我必须要有回应,但现在它没有填充我的页面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%时,它会填充页面的宽度。

我现在做错了什么蠢事?

4 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

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