Абсолютное позиционирование делает стол шире окна

Question

Я разработчик для iPhone, который является новичком в веб-разработке, поэтому, пожалуйста, прости меня, если я делаю какие-то глупые ошибки.

Моя проблема может быть продемонстрирована на этом jsfiddle (снет JS).У меня есть стол вверху, который на 100% ширины.Это показывает нормально.Таблица внизу того же класса, имеет ширину 100%, но, поскольку я установил абсолютную позицию для ее идентификатора (#footerTable), ширина шире, чем 100%!- Не могли бы вы сказать мне, что я делаю не так (CSS / HTML есть в ссылке - там не очень много).

Answer 1

http://jsfiddle.net/xnhMY/

При абсолютном позиционировании таблицы ее ширина 100% рассчитывалась следующим образом:

ширина элемента body + отступ элемента body

Answer 2

Причина, по которой table.loginTable шире 100% ширины, заключается в том, что 100% ширина плюс 20px (левый и правый 10px из padding).

Answer 3

С этой настройкой вы, вероятно, хотите, чтобы нижний колонтитул всегда был внизу, однако стиль по умолчанию в теле (body {padding:10px;}) означает, что, хотя первая таблица находится в потоке, 100% осталось между этими размерами тела.

Но когда вы расположите свою вторую абсолютную таблицу, она будет размещена относительно тега body, который имеет отступ в 10px. Но поскольку вторая таблица абсолютно позиционирована, она не имеет никакого отношения к тегу body, а ширина 100% - это реальная ширина тела без заполнения. Вы видели результат этого. Чтобы исправить это, сбросьте отступ для тега body body {padding:0;} или явно установите расстояние влево / вправо для нижнего колонтитула #footerTable {left:10px;right10px;}

Answer 4

Укажите ваш параметр left для второй таблицы:

#footerTable {
    position:absolute;
    bottom:20px;
    left:0px; 
}