Jak sprawić, by wysokość jednego diva zależała od wysokości innego diva?

Question

Cóż mam taką prostą strukturę DIV:

<div id="wrapper"> 
    <div id="1" class="block"> 
    1    
    </div> 
    <div id="2" class="block"> 
    2 
    </div> 
</div> 

JS Fiddle

Treść #1 mogą dynamicznie zmieniane przez javascript, a jego wysokość można zmienić zależała od treści. Chcę, aby #2 miał taką samą wysokość jak #1. Rozumiem, że mogę używać javascript do tego celu, ale proponuję, aby nie było tak trudnego sposobu, aby uczynić te poziomy div równymi używając tylko CSS i/lub zmieniając pozycjonowanie div w jaki sposób.

Answer 1

Aby rozwinąć mój komentarz, nie można tego zrobić semantycznie. Musisz użyć małego triku, aby sfałszować 100% wzrostu. Nazywa się to faux-kolumnami i możesz przeczytać więcej: here.

W twoim przypadku, nie możemy udawać, dodając kilka div tła:

<div class="background bg1"></div> 
<div class="background bg2"></div> 

Następnie zmieniając CSS tak:

#wrapper { 
    border: 1px solid black; 
    position: relative; 
} 

#wrapper:after { 
    display: block; 
    content: " "; 
    height: 0; 
    clear: both; 
} 

.block { 
    position: relative; 
    float: left; 
    vertical-align: top; 
    width: 200px; 
    text-align: left; 
    min-height: 200px; 
    padding-left: 20px; 
    z-index: 2; 
} 

.background { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 200px; 
    z-index: 1; 
} 

.bg1 { 
    background-color: #eee; 
} 

.bg2 { 
    left: 200px; 
    background-color: #aaa; 
}​ 

Oto pracuje jsFiddle.

Answer 2

Sposób jQuery: Użyj .height(), aby zwrócić wysokość Div1, a następnie po prostu użyj .css(), aby ustawić wysokość Div2 na Div1. Kiedy div zmienia się, możesz użyć zdarzenia resize, aby uruchomić funkcję, która zmieni wysokość div2.

Sposób CSS: odpowiedź Christiana Vargi wydaje się działać idealnie.