Jak utworzyć pozycję bezwzględną div mają szerokość równą jej rodzicowi minus margines

Question

Chcę mieć div wewnętrzny, który witryny wewnątrz kontenerów div o różnych rozmiarach, i zaczyna się od stałej lewej pozycji, a następnie ma szerokość, która wypełnia resztę pojemnika. Poniżej zamieściłem przykładowy kod CSS, aby spróbować zrozumieć.

Muszę użyć pozycjonowania bezwzględnego, więc nie mogę po prostu unieść się w prawo i ustawić lewy margines. Jakieś pomysły na to, jak sprawić, by działało to z absolutnym pozycjonowaniem? Próbowałem również width: auto i kilka różnych opcji rozmiarów skrzynek.

W celu wyjaśnienia, trudność polega na tym, że lewa krawędź musi zostać ustalona, ​​a lewa krawędź musi być skierowana w stronę prawego brzegu pojemnika. Nie mogę używać pozycji: relative i javascript, ale prawdopodobnie w końcu utworzę .inner1 i .inner2 divs z mocno zakodowanymi szerokościami, zanim to zrobię. Ale mając nadzieję na uniknięcie tego.

.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

Wystarczy określić wszystkie top, left, bottom i right właściwości i pole rozszerzy się na wszystkie z tych punktów.

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

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

See the jsFiddle.

Answer 2

Nie rozumiem, co dokładnie jest potrzebne, ale dlaczego nie można używać procentowe?

Zamiast:

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

Dlaczego nie można używać coś takiego:

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

procentach konfigurację dla atrybutu lewej i szerokości odpowiednio. 40-60, 30-70 itd.

Mam nadzieję, że to pomoże. Jeśli nie, proszę podać trochę więcej.

Pozdrawiam

Answer 3

To działa. Zmień szerokość zewnętrznego pudełka na dowolne, a wewnętrzne pudełko będzie pasowało do niego.

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

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

Edit: here's a fiddle