CSS, заставляя верхний и нижний колонтитулы сохранять 100% ширину при изменении размера браузера

Question

Я почти понял это, используя предыдущие вопросы, но столкнулся с небольшой проблемой.

Мне нужно, чтобы мои верхний и нижний колонтитулы занимали 100% страницы при изменении размера браузераи я решил это по большей части с помощью min-width в верхнем и нижнем колонтитуле.Верхний колонтитул ведет себя очень хорошо, но нижний колонтитул всегда имеет небольшой пробел справа.Помогите?ПРИМЕЧАНИЕ. Пробел появляется только при изменении размера браузера (уменьшается), и он всегда одинаково разнесен.

html,
body {
 margin:0;
 padding:0;
 height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
   min-width:1100px;
   }
#body {
  padding:10px;
  padding-bottom:60px;   /* Height of the footer */
 }
#footer {
 position:absolute;
  bottom:0;
  width:100%;
  height:60px;   /* Height of the footer */
  background:#6cf;
   min-width:1100px;
}

<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>

РЕДАКТИРОВАТЬ: я изменил минимальную ширину в нижнем колонтитуле, чтобы быть 1120px в качестве решения для bandaid, и это работает на данный момент.Почему это работает ??

Answer 1

Ваша проблема в том, что вы задали padding:10px; и min-width:1100px; в заголовке, а вы определяете min-width:1100px; в нижнем колонтитуле.Это вызывает у вас пустое пространство.

Попробуйте что-то вроде этого: http://jsfiddle.net/hrkp6/

Answer 2

Заполнение в вашем заголовке приводит вас в замешательство.

Я удалил его и присвоил ему фиксированную высоту для этой демонстрации ...

http://jsfiddle.net/BA2UY/

Это потому, что padding добавлено к размерам элемента, что делает его шире, чем вы указываете.

Answer 3

Попробуйте с этим:

#footer {
 position:absolute;
  bottom:0;
  left: 0;
  right: 0;
  height:60px;   
  background:#6cf;
  /* get rid of min-width */
}