CSS DIV 높이 100 %

Question

래퍼에 3 개의 div가 있습니다. 이 div 중 하나에 내 콘텐츠가 포함되어 있습니다. class="cont"이 div에는 동적 높이가 있습니다. 다른 divs navi-left와 navi right에는 div cont와 같은 높이가 있어야합니다. 나는 이것을 시도했지만 작동하지 않습니다. 도와 줄수있으세요?

<div style="width:400px;"> 
    <div class="navi-left" style="width:50px; height:100%; background:grey;"></div> 
    <div class="cont" style="width:80px; height:80px; background:blue;"></div> 
    <div class="navi-right" style="width:50px; height:100%; background:green;"></div> 
</div> 

Answer 1

동일한 높이의 유체 3 열 레이아웃을 찾으려면 this 'holy grail' post을 확인하십시오.

% 높이를 트리거하려면 상위의 높이를 알아야합니다. 또한, 같은 행에 모두 표시되도록하려면 DIV가 인라인으로 표시되어야합니다.

<div style="width:400px;height:80px;"> 
    <div class="navi-left" style="width:50px; height:100%; background:grey;"></div> 
    <div class="cont" style="width:80px; height:80px; background:blue;"></div> 
    <div class="navi-right" style="width:50px; height:100%; background:green;"></div> 
</div> 

CSS

div {display:inline-block;} 

바이올린 : http://jsfiddle.net/qvepX/