Абсолютно позиционированный элемент с шириной 100% выходит за пределы родительского элемента относительной ширины

Я бы хотел, чтобы мой абсолютно позиционированный элемент:

  1. всегда располагаться внизу элемента контейнера.
  2. охватывают весь контейнерный элемент.
  3. не перекрывать заполнение элемента контейнера.

Контейнер div имеет ширину, основанную на %.

Вы можете увидеть мою проблему здесь: http://jsfiddle.net/vTuTv/2/

.container {
  min-height: 200px; 
  width: 50%;
  background-color: #3e3e00;
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.line { 
  background-color: #003e3e;
  position: absolute;
  bottom: 0;
  height: 22px;
  width: 100%;   
}
<div class="container">
  <div class="line"></div>
</div>

Очевидно, что если бы элемент не был позиционирован абсолютно, я мог бы просто использовать box-sizing для родительского элемента.


css fluid-layout
person EddieFerrer    schedule 11.09.2013    source источник

Ответы (2)


arrow_upward
9
arrow_downward

Не используйте для этого width: 100%. Следующий код выполняет свою работу.

демонстрация jsFiddle

.line { 
    position: absolute;
    bottom: 0;
    height: 22px;
    left: 15px;
    right: 15px;    
}
person Itay    schedule 11.09.2013
comment
Я хочу, чтобы он не перекрывал обивку контейнера. Я мог бы просто обернуть все это в другой div, но хотел избежать этого, если бы был способ получше ... - person EddieFerrer; 12.09.2013
comment
просто примечание: .container должно быть position: relative; точно так же, как в вопросе. Прекрасно работает. - person Robert Fricke; 15.10.2013

arrow_upward
1
arrow_downward

Вам нужно перетянуть его вправо влево, чего в данный момент не происходит. Для этого добавьте:

left: 0;

http://jsfiddle.net/WhK5W/1/

person Hive7    schedule 11.09.2013