Bezwzględnie umieszczony element div dziecka rozwija się, aby dopasować go do rodzica?

Question

Czy istnieje mimo to, że dziecko z pozycją bezwzględną musi się rozwinąć, aby wypełnić swojego rodzica o względnej pozycji? (Wysokość nadrzędnej nie jest ustalona) Oto, co zrobiłem i działa dobrze w Firefoksie i IE7, ale nie w IE6. :(

<div id="parent"> 
    <div id="child1"></div> 
</div> 

#parent { position: relative; width: 200px; height:100%; background:red } 
#child1 { position: absolute; top: 0; left: 200px; height: 100%; background:blue } 

Answer 1

Jeśli dobrze pamiętam jest to błąd z jak IE6 obsługuje wysokość div. Stworzy tylko div do wysokości potrzebnej do przechowywania zawartości w nim, gdy wysokość jest ustawiona na 100%. Chciałbym polecam dwa podejścia:

1. nie martw się o wspieranie IE6, ponieważ jest to martwy przeglądarka i tak
2. Jeśli to nie zadziała, należy użyć coś takiego jQuery, aby uzyskać wysokość div, a następnie ustawić dziecko div do tej wysokości
3. sfałszować, ustawiając backgro ma być tego samego koloru, więc nikt nie zauważa różnicy.

Answer 2

Można to osiągnąć, ustawiając górny i dolny atrybut dziecka.

See how this is done

Na dole tego artykułu znajduje się link do Deana Edwardsa IE7 i IE8 (js) biblioteki, które należy uwzględnić dla użytkowników IE6. Jest to biblioteka JS, która w rzeczywistości powoduje, że IE6 zachowuje się jak IE7 (lub 8), gdy ją dodasz. Słodkie!

Dean Edwars' IE7 and 8 JS libraries

Answer 3

O ile mi wiadomo, nie ma możliwości rozszerzania elementu nadrzędnego wokół elementu pozycjonowanego bezwzględnie dziecięcej. Przez całkowite umieszczenie elementu podrzędnego, usuwasz go ze zwykłego przepływu elementów strony.

Niedawno zbudowałem witrynę o 2 kolumnach, w której prawą kolumnę ustawiono absolutnie, ale lewa kolumna nie była. Jeśli lewa kolumna miała mniejszą zawartość i mniejszą wysokość niż prawa kolumna, strona odciąłaby prawą kolumnę, ponieważ była absolutnie ustawiona.

Aby rozwiązać ten problem, musiałem określić, czy wysokość prawej kolumny była większa od wysokości lewej kolumny, a jeśli tak, to ustawić wysokość wysokości div dla elementu nadrzędnego na większą z dwóch.

Oto moje rozwiązanie jQuery. Nie jestem zbyt dobrym programistą, więc możesz to poprawić:

jQuery(function(){ 

    var rightColHeight = jQuery('div.right_column').height(); 
    var leftColHeight = jQuery('div.left_column').height(); 

    if (rightColHeight > leftColHeight){ 
    jQuery('.content_wrap').height(rightColHeight+'px'); 
} 
}); 

Answer 4

To proste. Sztuką jest ustawienie top: 0px i bottom: 0px jednocześnie

Oto kod roboczych

html, body { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 

#parent { 
    display: block; 
    background-color: #ff0; 
    border: 1px solid #f00; 
    position: relative; 
    width: 200px; 
    height: 100%; 
} 
#child1 { 
    background-color: #f00; 
    display: block; 
    border: 1px solid #ff0; 
    position: absolute; 
    left: 200px; 
    top: 0px; 
    bottom: 0px; 
} 

odjazdu przykład roboczych tutaj http://jsfiddle.net/Qexhh/