Проблема в стиле ширины в html5

Question

Я создал простую веб-страницу, используя html5 и css, css3.

Я создал липкий колонтитул, Вот код:

#footer { 
    position:absolute; 
    bottom:0; 
    color:#000; 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#fff; 
} 

и завернуть и стили заголовков:

#wrap 
{ 
    width:100%; 
} 
header 
{ 
    width:960px; 
    margin:0 auto; 

} 

из моей выше коды, моя страница выглядеть следующим образом: http://s2.postimg.org/6t4qokwxl/Untitled_1_copy.png

Мне нужно показать нижний колонтитул как полную ширину, но когда я удаляю margin:0 auto; из заголовка, нижний колонтитул показывает ровно полную ширину и не отображает заголовок должным образом.

Мне нужно показать, кроме ширины нижнего колонтитула, как 960px; и нижний колонтитул должен иметь полную ширину.

Я борюсь, может ли кто-нибудь мне помочь? Заранее спасибо.

Answer 1

Трудно ответить, не зная, как структурирован ваш HTML, но, судя по скриншоту, вам нужно добавить left: 0 в нижний колонтитул CSS, иначе он будет иметь левое положение на том же левом краю, что и его ближайший содержащий блок (который выглядит как элемент #wrap).

Совет: в следующий раз включите ссылку на пример кода с вашим сообщением. :-)

Answer 2

Вы должны сделать в соответствии с этой скрипкой: http://jsfiddle.net/u9he2jjp/

* { 
 
    margin: 0; 
 
} 
 
html, body { 
 
    height: 100%; 
 
} 
 
.page-wrap { 
 
    min-height: 100%; 
 
    /* equal to footer height */ 
 
    margin-bottom: -142px; 
 
} 
 
.page-wrap:after { 
 
    content: ""; 
 
    display: block; 
 
} 
 
.site-footer, .page-wrap:after { 
 
    height: 142px; 
 
} 
 
.site-footer { 
 
    background: orange; 
 
}

<div class="page-wrap"> 
 
    
 
    Content! 
 
     
 
</div> 
 

 
<footer class="site-footer"> 
 
    I'm the Sticky Footer. 
 
</footer>