Если вы делаете:
<div style="width: auto; background: red; color: white">test</div>
Вы получаете div, который растягивается, чтобы заполнить всю ширину экрана (100%). Вот что мне нужно, чтобы это случилось.
Однако мне также нужно установить начальную позицию. Итак, мне нужна position: absolute.
Когда я добавляю position: absolute, ширина элемента div равна ширине содержимого внутри (аналогично значениям с плавающей точкой). Есть ли способ обойти это?
Я не могу просто указать width: 100% так как это не учитывает размеры границ и т.д.
Когда я добавляю позицию: абсолютная, ширина div только такая же широкая, как содержимое внутри.. (Подобно поплавкам). Есть ли способ обойти это?
Я не могу просто указать ширину: 100%, так как это не занимает размеры границ учетной записи и т.д.
Вы можете использовать position:absolute; left:0; right:0; top:0.
Вот так: http://jsfiddle.net/thirtydot/yQWGV/
Вы можете использовать ширину: 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 и будет работать только в новых браузерах, и, как вы можете видеть из моего примера, требуется ужасная контрпродуктивная мера, которая является префиксом поставщика.
просто напишите вот так:
div.absolute {
border: 5px solid #000;
background-color: #F00;
position: absolute;
top: 100px;
padding: 50px;
left:0;
right:0;
}
в этом padding & border не увеличивать ширину элемента.