2013-01-14 13 views
27

Powiedzmy mam dwie div, jeden wewnątrz drugiego, tak jak poniżej:Czy istnieje sposób, aby "position: absolute" div zachował względną szerokość?

<html> 
<body> 
<div id="outer" style="width:50%"> 
<div id="inner" style="width:100%"> 
</div> 
</div> 
</body> 
</html> 

Teraz wewnętrzna div ma szerokość 100% z 50% rozmiaru ekranu lub 50% ekranu rozmiar. , Jeśli było zmieniać wewnętrzną div pozycji absolutnej, na przykład:

<html> 
<body> 
<div id="outer" style="width:50%"> 
<div id="inner" style="position:absolute;width:100%"> 
</div> 
</div> 
</body> 
</html> 

W tym przypadku, wewnętrzna strefa przyjmuje się 100% powierzchni ekranu, ponieważ jego położenie jest ustawiony na bezwzględne.

Moje pytanie brzmi następująco: Czy istnieje sposób na zachowanie względnej szerokości wewnętrznego elementu div, podczas gdy jego pozycja jest ustawiona na wartość absolutną?

Odpowiedz

54

Dodaj pozycja: względna do swojej zewnętrznej div.

aktualizacja: To działa, ponieważ pozycje w position: absolute są w stosunku do pierwszego rodzica, który ma pewne pozycjonowanie (innego niż statyczne). W takim przypadku nie było takiego pojemnika, więc korzysta on ze strony.

+2

Dzięki za pomoc! To mnie denerwowało przez około godzinę. Cieszę się, że rozwiązanie jest takie proste :) – Charles

+2

OHHH AHHH !!! Spędziłem ostatnie 5 godzin próbując naprawić tę cholerną stronę, nad którą pracowałem. Dziękuję bardzo za to. Czy możesz wyjaśnić, dlaczego to działa? – Lebowski156

+1

OK, to jest trolling, ale po raz pierwszy css ma proste rozwiązanie prostego problemu! Dziękuję Ci! – mmuller

6

Tak. Ustaw zewnętrzny względem pozycji: względny.

http://jsfiddle.net/57673/

.outer 
{ 
    width: 50%; 
    height: 200px; 
    position: relative; 
    border: 1px solid red; 
} 

.inner 
{ 
    width: 100%; 
    position: absolute; 
    height: 100%; 
    border: 1px solid blue; 
} 
+0

Dzięki, ta sama odpowiedź co Bror! Działa od razu :) – Charles

Powiązane problemy