Нижний колонтитул не является шириной родительского div

Question

Этот нижний колонтитул будет смертью меня. Я должен быть отзывчивым, но теперь он не заполняет ширину моего div. Я пробовал авто, 100% и наследовал (он заполняет ширину, но тогда отклика уничтожается).

Мой 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> 

Когда я использую автомобиль, он падает чуть меньше. Когда я использую 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

Вы используете инфраструктуру пользовательского интерфейса, которая имеет множество полей и дополнений, встроенных в их компоненты. Должна применяться маржа, которую вы не видите. Вы можете попробовать добавить margin-left:0 !important; и margin-right:0 !important;

Еще одна вещь, использующая абсурдное или фиксированное позиционирование, может испортить, как ваша страница отображается на мобильных устройствах - особенно когда они переходят в режим ввода текста, а клавиатура сокращает область просмотра пополам. Многие мобильные браузеры не знают, как обращаться с абсолютным позиционированием.

Answer 4

Попробуйте добавить left: 0, right:0 и float: left к элементу.