Footer is not 100% width

У меня проблема с нижним колонтитулом. Сначала код:Footer is not 100% width

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body, 
 
html { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
body { 
 
    background: url('../images/bg.png'); 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    height: 100%; 
 
    min-height: 100%; 
 
    width: 100%; 
 
} 
 
body > #wrapper { 
 
    width: 900px; 
 
    margin: 0 auto; 
 
    margin-top: 120px; 
 
    height: auto; 
 
    position: relative; 
 
    padding-bottom: 100px; 
 
} 
 
.footer { 
 
    height: 100px; 
 
    width: 100%; 
 
    left: 0; 
 
    background: red; 
 
    position: absolute; 
 
    bottom: 0; 
 
}

<div id="wrapper"> 
 
    //many other div container 
 
</div> 
 

 
<div class="footer"> 
 

 
    Test. 
 

 
</div>

Теперь моя сноска разве 100% ширина это точно: 900 точек, как обертка почему? В моей обертке находятся несколько контейнеров div, но все они закрыты.

Спасибо

источник

2015-11-16 Hemran

Использование 'vw'. '.footer {width: 100vw; } ' – Tushar

Когда я попробую ваш [код в скрипке] (http://jsfiddle.net/j3hmg0w5/), он отлично работает, если я правильно понимаю ваше требование (я добавил границу к обертке, чтобы сделать ее более очевидной). Нижний колонтитул всегда составляет 100% ширины видимого окна. – lurker

width: 100%; адаптируется к ширине родителя, так как ваша обертка 900px в ширину, она занимает это пространство. Я рекомендую использовать контейнерные классы для ширины, что-то вроде этого: ширина

<body> 
    <div class="header"> 
     <div class="container"> 
      Your header here. 
     </div> 
    </div> 
    <div class="content"> 
     <div class="container"> 
      Your content here. 
     </div> 
    </div> 
    <div class="footer"> 
     <div class="container"> 
      Your footer here. 
     </div> 
    </div> 
</body> 

.container{ 
    width: 900px; 
    margin: 0 auto; 
    padding: 0 30px; 
    position: relative; 
}

источник

2015-11-16 13:28:03 AlexG

Спасибо :) это работает – Hemran

Добро пожаловать;) – AlexG

ваши #wrapper «ы является 900px. Ваша ширина body. поэтому ваш элемент .footer также равен 900px, так как он имеет ширину его родителя ... 900px.

источник

2015-11-16 13:30:07

Вам нужно установить ширину: 100% на #wrapper. Поскольку у вас ширина 900px на #wrapper, она останавливает нижний колонтитул, чтобы взять всю ширину экрана.

Fiddle.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body, 
 
html { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
body { 
 
    background: url('../images/bg.png'); 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    height: 100%; 
 
    min-height: 100%; 
 
    width: 100%; 
 
} 
 
body > #wrapper { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    margin-top: 120px; 
 
    height: auto; 
 
    position: relative; 
 
    padding-bottom: 100px; 
 
} 
 
.footer { 
 
    height: 100px; 
 
    width: 100%; 
 
    left: 0; 
 
    background: red; 
 
    position: absolute; 
 
    bottom: 0; 
 
}

<div id="wrapper"> 
 
    //many other div container 
 
</div> 
 

 
<div class="footer"> 
 

 
    Test. 
 

 
</div>

источник

2015-11-16 13:30:59 Ionut

Footer is not 100% width

ответ

Смежные вопросы