신장 : 100 %; Will not Work

Question

다음 요소를 가져 와서 높이를 100 %까지 늘릴 수 없습니다.

여기에 텍스트가없는 경우. 그들은 전혀 보이지 않을 것입니다. 이유가 정확히 무엇인지 모르겠습니다.

는 모습을 FIDDLE

HTML

<figure class="left clearfix">LEFT</figure> 
<figure class="middle">MID</figure> 
<figure class="right clearfix">RIGHT</figure> 

CSS

html body figure.left { 
    position: relative; 

    width: -webkit-calc(50% - 20px); 
    width: -moz-calc(50% - 20px); 
    width: calc(50% - 20px); 

    height: 100%; 
    margin: 0; 
    clear: none; 
    float: left; 
    display: block; 
    overflow: hidden; 

    background-color: gray; 
} 

    html body figure.right { 
    position: relative; 

    width: -webkit-calc(50% - 20px); 
    width: -moz-calc(50% - 20px); 
    width: calc(50% - 20px); 

    height: 100%; 
    margin: 0; 
    clear: none; 
    float: left; 
    display: block; 
    overflow: hidden; 

    background-color: orange; 
} 

    html body figure.middle { 
    position: relative; 

    width: 40px; 
    height: 100%; 

    margin: 0; 
    clear: none; 
    float: left; 
    display: block; 
    overflow: hidden; 

    background-color: black; 
} 

감사를 가져 가라.

Answer 1

그리드 컨테이너

html body div.grid-container { 
    width: 100%; 
    height: 20px; //a height value to your grid container 
    padding: 0; 
    margin: auto; 
    clear: none; 
    float: none; 
    margin: auto; 
} 

에 "높이"를 정의하고 당신이 필요 높이를 정의 할 수 있습니다 : 상속; 는 "HTML 바디 figure.left {}"와 "HTML 바디 figure.right {}"

Answer 2

이 (http://jsfiddle.net/3MRt6/)

html, body, div.grid-container { 
width: 100%; 
    height: 100%; 
padding: 0; 
margin: auto; 
clear: none; 
float: none; 
margin: auto; 
} 

figure.left { 
position: relative; 

width: -webkit-calc(50% - 20px); 
width: -moz-calc(50% - 20px); 
width: calc(50% - 20px); 

height: 100%; 
margin: 0; 
clear: none; 
float: left; 
display: block; 
overflow: hidden; 

background-color: gray; 
} 

figure.right { 
position: relative; 

width: -webkit-calc(50% - 20px); 
width: -moz-calc(50% - 20px); 
width: calc(50% - 20px); 

height: 100%; 
margin: 0; 
clear: none; 
float: left; 
display: block; 
overflow: hidden; 

background-color: orange; 
} 

figure.middle { 
position: relative; 

width: 40px; 
height: 100%; 

margin: 0; 
clear: none; 
float: left; 
display: block; 
overflow: hidden; 

background-color: black; 
}