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

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

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

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

.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%;
}

Ответ 1

Просто укажите все свойства top, left, bottom и right, и поле будет развернуто во всех этих точках.

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

.inner {
  position: absolute;
  top: 0;
  left: 200px;
  bottom: 0;
  right: 0;
}

См. jsFiddle.

Ответ 2

Я не понимаю, что именно вам нужно, но почему вы не используете проценты?

Вместо:

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

Почему бы вам не использовать что-то вроде:

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

Установите проценты для атрибута слева и ширины соответственно. 40-60, 30-70 и т.д.

Надеюсь, это поможет. Если нет, укажите немного больше.

Привет

Ответ 3

Это работает. Измените ширину внешнего окна на все, что хотите, и внутренний ящик растет, чтобы соответствовать ему.

.container {
    width: 400px;
    height: 300px;
} 

.inner {
    position: relative;
    margin-left: 200px;
    height: 100%;
}

Изменить: здесь скрипка