Как сделать динамическую высоту для div

Question

есть возможность иметь высоту div, которая зависит от размера других div?

Вот пример

<div id="wrapper" style="height:400px;background-color:green;"> 

    <div id="content1" style="height:auto;min-height:50%;background-color: limegreen;"> 
     Content 1 
    </div> 

    <div id="content2" style="min-height:20%;background-color:lightblue;"> 
     Content 2 
</div> 

<div id="content3" style="min-height:20%;background-color:blue;"> 
     Content 3 
</div> 

</div> 

Вы можете увидеть также здесь: http://jsfiddle.net/kXfsY/28/

Вы можете увидеть, отд обертка не перекрывается с другими дивами. Я хотел бы иметь div content1, чтобы иметь высоту не менее 50% от обертки div или больше, поэтому полная оболочка div будет перекрываться. Размер содержимого div 2 и 3 будет динамическим, зависит от количества элементов внутри. Или, возможно, div content 2 или div content 3 будет пустым, тогда было бы неплохо, если div content1 будет увеличиваться, и будет использоваться полная высота div-обертки.

Возможно ли это?

Спасибо

Answer 1

Вы можете сделать это с display: table и display: table-row. Вы можете либо удалить элементы #content2/#content3, либо сделать их пустыми. Элемент `# content1 будет занимать все оставшееся пространство независимо от того, что.

http://codepen.io/cimmanon/pen/pHAcJ

#wrapper { 
    height:400px; 
    background-color:green; 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
} 

#content1 { 
    min-height:50%; 
    background-color: limegreen; 
    display: table-row; 
} 

#content2, #content3 { 
    height:20%; 
    display: table-row; 
} 

#content2:empty, #content3:empty { 
    display: none; 
} 

#content2 { 
    background-color:lightblue; 
} 

#content3 { 
    background-color:blue; 
}