ширина: 100% с положением: абсолют - PullRequest
Новая
       15

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

15 голосов
/ 02 ноября 2011

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

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

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

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

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

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

Ответы [ 3 ]

22 голосов
/ 02 ноября 2011

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

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

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

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

4 голосов
/ 02 ноября 2011

Вы можете использовать width: 100% и box-sizing атрибута 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 голосов
/ 02 ноября 2011

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

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 не увеличивает ширину элемента.

...