100% ширина, отступ и абсолютное позиционирование - PullRequest
Новая
       1

100% ширина, отступ и абсолютное позиционирование

4 голосов
/ 05 февраля 2011

Я пытался заставить div заполнить определенную часть экрана, оставляя 412 пикселей пустыми как слева, так и справа. Полегче, а?

Теперь, когда я добавляю position: absolute & top: 0, заливка исчезает. Инспектор элементов показывает, что он пуст - «отступы» остаются, но ширина: 100% исчезает. Я использовал этот код (без позиционирования): 

<div style="height:73px; padding-left:413px; padding-right:413px;">
  <div style="width:100%; height:73px; background:url(top-fill-small.png);">
  </div>
</div>

Итак, как я могу расположить его абсолютно (мне нужно его анимировать позже), сохранив заполнение? Я бы очень хотел твоей помощи. Заранее спасибо!

Ответы [ 2 ]

5 голосов
/ 05 февраля 2011

с того момента, когда вам нужно использовать position:absolute;, почему бы не использовать свойства left & right вместо заполнения?

html 

<div style="height:73px;position:absolute;left:413px;right:413px;"><div style="width:100%; height:73px; background:url(top-fill-small.png);border:1px solid red">Content  Content Content Content Content Content Content Content Content Content  Content Content Content Content Content Content Content Content Content  Content Content Content Content Content </div></div>

Пример: http://jsbin.com/anega3

edit

альтернативный вариант, если вам крайне необходимо использовать заполнение, вы можете установить left:0; right:0; и затем использоватьу вас уже есть прокладки.

html 

<div style="height:73px;position:absolute;left:0;right:0px;padding-left:413px;padding-right:413px;"><div style="width:100%; height:73px; background:url(top-fill-small.png);border:1px solid red">Content  Content Content Content Content Content Content Content Content Content  Content Content Content Content Content Content Content Content Content  Content Content Content Content Content </div></div>

Пример: http://jsbin.com/anega3/2

5 голосов
/ 05 февраля 2011

Возможно, это? 

<div style="width:100%; position:absolute; top:0; left:0">
    <div style="height:73px; background:url(top-fill-small.png); margin-left:413px; margin-right:413px"></div>
</div>
...