ширина: 100% с положением: абсолют

Если вы делаете:

<div style="width: auto; background: red; color: white">test</div>

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

Однако мне также нужно установить начальную позицию. Итак, мне нужна position: absolute.

Когда я добавляю position: absolute, ширина элемента div равна ширине содержимого внутри (аналогично значениям с плавающей точкой). Есть ли способ обойти это?

Я не могу просто указать width: 100% так как это не учитывает размеры границ и т.д.

Ответ 1

Когда я добавляю позицию: абсолютная, ширина div только такая же широкая, как содержимое внутри.. (Подобно поплавкам). Есть ли способ обойти это?

Я не могу просто указать ширину: 100%, так как это не занимает размеры границ учетной записи и т.д.

Вы можете использовать position:absolute; left:0; right:0; top:0.

Вот так: http://jsfiddle.net/thirtydot/yQWGV/

Ответ 2

Вы можете использовать ширину: 100% и размер окна атрибута css, чтобы получить модель окна, работающую как IE 5.5, то есть заполнение и граница, подсчитанные в ширину.

div.absolute {
    width: 100%;
    border: 5px solid #000;
    background-color: #F00;
    position: absolute; top: 100px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 50px;
}

Здесь сценарий: http://jsfiddle.net/dJtm2/

Будьте осторожны, поскольку это относительно новый атрибут CSS3 и будет работать только в новых браузерах, и, как вы можете видеть из моего примера, требуется ужасная контрпродуктивная мера, которая является префиксом поставщика.

Ответ 3

просто напишите вот так:

div.absolute {
    border: 5px solid #000;
    background-color: #F00;
    position: absolute;
    top: 100px;
    padding: 50px;
    left:0;
    right:0;
}

http://jsfiddle.net/dJtm2/1/

в этом padding & border не увеличивать ширину элемента.