¿Cómo puedo hacer que un div posicionado absoluto tenga un ancho igual a su matriz menos un margen

Question

Quiero tener un div interno que se ubique dentro de divisiones de contenedores de diferentes tamaños, y comience en una posición fija izquierda y luego tenga un ancho que llene el resto del contenedor. He incluido algunos ejemplos de CSS a continuación para intentar transmitir el punto.

Tengo que usar el posicionamiento absoluto, así que no puedo simplemente flotar a la derecha y establecer un margen izquierdo. ¿Alguna idea de cómo hacer que esto funcione con un posicionamiento absoluto? También probé ancho: automático y algunas opciones de tamaño de caja diferentes.

Para aclarar, la dificultad de esto es que el borde izquierdo tiene que ser fijo, y el borde izquierdo tiene que estar contra el borde derecho del contenedor. No puedo usar position: relative, y javascript, pero probablemente terminaré haciendo divs .inner1 y .inner2 con anchuras codificadas antes de hacer eso. Pero esperando evitar eso.

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

Answer 1

sólo tiene que especificar todos los top, left, bottom y right propiedades y la caja se expandirá para estar en todos esos puntos.

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

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

See the jsFiddle.

Answer 2

que no entiendo lo que es exactamente lo que necesita, pero ¿por qué no utilizar porcentajes?

En lugar de:

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

¿Por qué no usar algo como:

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

porcentajes de configuración para atributo izquierda y el ancho en consecuencia. 40-60, 30-70 y así sucesivamente.

Espero que esto ayude. Si no, por favor especifica un poco más.

Saludos

Answer 3

Esto funciona. Cambia el ancho de la caja exterior a lo que quieras y la caja interna crece para que coincida.

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

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

Editar: here's a fiddle