Как сделать так, чтобы ширина блока div с абсолютным позиционированием равнялась его родительскому элементу за вычетом некоторого поля

Я хочу иметь внутренний div, который размещается внутри контейнеров div разного размера, и начинается с фиксированной левой позиции, а затем имеет ширину, которая заполняет остальную часть контейнера. Я включил несколько примеров CSS ниже, чтобы попытаться донести суть.

Мне нужно использовать абсолютное позиционирование, поэтому нельзя просто перемещать вправо и устанавливать левое поле. Есть идеи, как заставить эту работу работать с абсолютным позиционированием? Я также пробовал width: auto и несколько других вариантов размера коробки.

Чтобы уточнить, хитрость здесь заключается в том, что левая граница должна быть зафиксирована, а левая граница должна быть напротив правой границы контейнера. Я не могу использовать position: relative и javascript, но, вероятно, перед этим я бы создал div .inner1 и .inner2 с жестко заданной шириной. Но надеясь этого избежать.

.container1 {
  position: relative;
  width: 400px;
  height: 300px;
}

 .container2 {
  position: relative;
  width: 500px;
  height: 300px;
}

.inner {
  position: absolute;
  top: 0px;
  left: 200px;
  height: 100%;
  width: 100%;
}

enter image description here

27
задан animuson 26 February 2012 в 04:19
поделиться