Jak widać poniżej w CSS, chcę child2
się wcześniej ustawić child1
. Wynika to z faktu, że witryna, którą aktualnie opracowuję, powinna również działać na urządzeniach mobilnych, na których child2
powinna znajdować się na dole, ponieważ zawiera nawigację, którą chcę poniżej treści na urządzeniach mobilnych. - Dlaczego nie 2 strony główne? To są jedyne 2, divs
które zostały przesunięte w całym HTML, więc 2 strony główne dla tej drobnej zmiany to przesada.
HTML:
<div id="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
CSS:
parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }
child2
ma wysokość dynamiczną, ponieważ różne podwitryny mogą zawierać mniej lub więcej elementów nawigacyjnych.
Wiem, że elementy pozycjonowane absolutnie są usuwane z przepływu, a zatem są ignorowane przez inne elementy.
Próbowałem ustawić overflow:hidden;
div rodzica, ale to nie pomogło, podobnie jak clearfix
.
Moim ostatecznym rozwiązaniem będzie JavaScript, aby odpowiednio zmienić ich położenie divs
, ale na razie postaram się sprawdzić, czy istnieje sposób inny niż JavaScript.
źródło
Odpowiedzi:
Sam odpowiedziałeś na pytanie: „Wiem, że elementy pozycjonowane absolutnie są usuwane z przepływu, a zatem są ignorowane przez inne elementy”. Nie można więc ustawić wysokości rodziców zgodnie z absolutnie pozycjonowanym elementem.
Albo używasz ustalonych wysokości, albo musisz zaangażować JS.
źródło
Chociaż rozciąganie do elementów za pomocą
position: absolute
nie jest możliwe, często istnieją rozwiązania, w których można uniknąć absolutnego pozycjonowania, uzyskując ten sam efekt. Spójrz na to skrzypce, które rozwiązują problem w twoim konkretnym przypadku http://jsfiddle.net/gS9q7/Sztuczka polega na odwróceniu kolejności elementów poprzez przesunięcie obu elementów, pierwszego w prawo, drugiego w lewo, aby drugi pojawił się pierwszy.
Na koniec dodaj poprawkę do obiektu nadrzędnego i gotowe (zobacz skrzynkę dla kompletnego rozwiązania).
Zasadniczo, dopóki element z pozycją bezwzględną jest umieszczony na górze elementu nadrzędnego, istnieje spora szansa na obejście tego problemu przez przesunięcie elementu.
źródło
Feeela ma rację, ale możesz uzyskać od rodzica
div
kurczenie się / rozwijanie do elementu potomnego, jeśli odwrócisz swojediv
pozycjonowanie w następujący sposób:To powinno ci pomóc.
źródło
Istnieje dość prosty sposób na rozwiązanie tego problemu.
Musisz tylko zduplikować zawartość child1 i child2 we względnych div z display: none w parent div. Powiedz child1_1 i child2_2. Umieść child2_2 na górze, a child1_1 na dole.
Kiedy twoja jquery (lub cokolwiek) wywołuje div bezwzględny, po prostu ustaw odpowiedni względny div (child1_1 lub child2_2) z display: block AND visibility: hidden. Względne dziecko nadal będzie niewidoczne, ale zwiększy div rodzica.
źródło
W przypadku czystego JavaScript wystarczy pobrać wysokość
static position
elementu potomnego.child1
za pomocą metody getComputedStyle () , a następnie ustawić tę wartość pobierania jakopadding-top
dla tego samego dziecka za pomocą właściwości HTMLElement.style .Sprawdź i uruchom następujący fragment kodu, aby uzyskać praktyczny przykład tego, co opisałem powyżej:
źródło
Miałem podobny problem. Aby rozwiązać ten problem (zamiast obliczać wysokość elementu iframe za pomocą treści, dokumentu lub okna), utworzyłem div, który otacza całą zawartość strony (na przykład div z id = "page"), a następnie użyłem jego wysokości.
źródło
To pytanie zostało zadane w 2012 roku przed Flexboksem. Prawidłowym sposobem rozwiązania tego problemu za pomocą nowoczesnego CSS jest zapytanie o media i odwrócenie kolumny elastycznej dla urządzeń mobilnych. Pozycjonowanie bezwzględne nie jest potrzebne.
https://jsfiddle.net/tnhsaesop/vjftq198/3/
HTML:
CSS:
źródło
Wymyśliłem inne rozwiązanie, którego nie kocham, ale wykonuje pracę.
Zasadniczo zduplikuj elementy potomne w taki sposób, aby duplikaty nie były widoczne.
CSS:
Jeśli te elementy potomne zawierają niewiele znaczników, wpływ będzie niewielki.
źródło
Oto przykład JS:
---------- Przykład jQuery JS --------------------
źródło
Jest bardzo prosty hack, który rozwiązuje ten problem
Oto codeandbox, który ilustruje rozwiązanie: https://codesandbox.io/s/00w06z1n5l
HTML
CSS
możesz bawić się pozycjonowaniem div hacka, aby wpływać na pozycję dziecka.
Oto fragment:
źródło
Teraz jest na to lepszy sposób. Możesz użyć właściwości bottom.
źródło
Jest to bardzo podobne do sugestii @ChrisC. Nie używa elementu pozycjonowanego absolutnie, ale względnego. Może może ci pomóc
Twój css lubi to:
https://jsfiddle.net/royriojas/dndjwa6t/
źródło
Rozważ także następne podejście:
CSS:
Również, ponieważ próbujesz zmienić położenie div, rozważ css grid
źródło
Widoki absolutne pozycjonują się względem najbliższego przodka, który nie jest pozycjonowany statycznie (
position: static
), dlatego jeśli chcesz, aby widok absolutny był pozycjonowany względem danego rodzica, ustaw rodzicaposition
narelative
i dzieckoposition
naabsolute
źródło
Spróbuj, to zadziałało dla mnie
Ustawi wysokość dziecka na wysokość rodzica
źródło