身高：100％;不起作用

我無法獲得以下元素將其高度延伸至100％。身高：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; 
}

感謝。

來源

2013-12-03 Borsn

定義一個「高度」，以網格容器

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 {}」

來源

2013-12-03 18:35:08

沒有真正的工作：** [FIDDLE]（HTTP ：//jsfiddle.net/enbs/aW3Gk/14/）** – Borsn

爲了使用'inherit'，你的網格容器高度需要是一個絕對值，例如20px。 http://jsfiddle.net/aW3Gk/24/ –

對。但高度是20px。只要您將網格容器的高度更改爲100％即可。它沒有文字就變成空白。 – Borsn

請試試這個（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; 
}

來源

2013-12-03 18:50:55 Kaushal

身高：100％;不起作用

回答

相關問題