Forum PHP.pl > [HTML]overflow:auto i position:absolute

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML]overflow:auto i position:absolute

m72

27.10.2014, 01:09:39

Jak zrobić żeby div zewnętrzny automatycznie obejmował wewnętrzne które muszą mieć position:absolute ?
overflow:auto coś nie chce działać w tym przypadku

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
 
<div style="position:relative;background-color:#eee;width:500px;border:1px solid red;">
	<div style="position:absolute;top:0px; left:0px;width:100px;height:100px; background-color:#fad">1</div>
	<div style="position:absolute;top:0px; left:100px;width:100px;height:100px; background-color:#fdd">2</div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

trueblue

27.10.2014, 08:22:56

W JS.
Dlaczego muszą być pozycjonowane absolutnie?

mrc

27.10.2014, 09:13:11

Musisz mieć stałą wysokość/szerokość kontenera, albo w js sprawdzać gdzie znajdują się rogi poszczególnych elementów i zrobić wysokość/szerokość taką, aby pokrywało najdalej wysunięte punkty. Inaczej tego nie zrobisz, jeżeli chcesz mieć position:absolute.

m72

27.10.2014, 13:18:59

positnion:absolute - bo robie na nich jquery animate.
Ogólnie sparawa wygląda tak, ładuję plik php ajaxem.
Appenduje dane do diva

[HTML] pobierz, plaintext 
 $('#wiecej').append(data.responseText); 
[HTML] pobierz, plaintext

(po tym dalej nie mam jeszcze jego wysokości)
Wyświetlam go

[HTML] pobierz, plaintext 
$( "#wiecej" ).show( "fade", 300, function(){
						console.log($("#kontener_wiecej").height());
						$("#wizytowka_obejma").height(	$("#kontener_wiecej").height()	);
				});
[HTML] pobierz, plaintext

i dopiero po całkowitym wyświetleniu, tak jak wyżej, można ściągnąć jego wysokość i roziciągnąć kontener (#wizytowka_obejma).
Niby działa ale powoduje to miganie div-a na ekranie bo dopiero po "show()" wysokosć kontenera jest dopasowywana.
Ja potrzebuje mieć wysokość #kontener_wiecej po załadowaniu danych ale przed wyswietleniem diva

Najlepiej jakby funkcja append miała jakiś callback ale podobno nie ma. Próbowałem load-em który ma callback ale coś mi nie wychodzi.

trueblue

27.10.2014, 13:22:43

Absolute nie musi być aby wywołać na elemencie animate().
Ale tu chyba nie o to chodzi, a o układ.
Najpierw pokazałeś strukturę z jednym divem i dwoma zagnieżdżonymi.
Tu wygląda jakbyś miał tylko jeden zagnieżdżony.
Napisz jaki efekt chcesz osiągnąć (jak mają być ustawione divy).

m72

27.10.2014, 13:50:34

Ok żeby nie bawić się w ciuciubabkę lepiej narysuję o co mi chodzi, inaczej musiałbym godzinę preparować kod pod tego posta, więc.

1. Na tle głównej strony ma wyskakiwać okienko "kontener" (div-draggable).
2. W nim mają się przesuwać względem niego 2 divy po kliku w cośtam.
4. Oczywiście tylko jeden z nich ma być widoczny a drugi ma wypadać poza kontener.
3. Zaznaczam że wszystkie dane są ładowane z pliku php a tam z bazy.

Tak jak pisałem wcześniej, niby wszystko mi działa ale wysokość div1, div2 można odczytać dopiero po wyświetleniu div-a a mi trzeba po zaappendowaniu danych ale przed wyświetleniem żebym za wczasu mógł dopasować wys kontenera który jak pisaliście nie może obejmować div-ów z position:absolute

trueblue

27.10.2014, 14:34:39

1. Po odpowiedzi ajax utwórz w body div.
2. Div widoczny, albo poza obszarem okna, np. position:absolute; top:-10000px
3. Wstaw do niego tekst.
4. Zmierz wysokość.
5. Usuń ten div.
Reszta już wiesz jak.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.