2013-05-20 60 views
10

パーセンテージを使用してheightプロパティを使用しようとしていますが、機能しません。パーセンテージを使用したいので、どんな解像度でもうまく見えます。CSSで高さのパーセンテージが動作しません

<div id="bloque_1" style="height: 80%;background: red"> 
</div> 

どうすればいいですか?

+3

高さの割合はややずさんされていますが、あなたが主張する場合は、パーセンテージを使用するだけで、コンテナの高さの割合がかかります。 {min-height:100%; }を{body}タグに追加します。 –

+0

min-height doest work =(。私は代わりに高さ:100% – Flezcano

+0

を使用しました。コンテンツの高さが100%を超えて展開する必要があるときに問題が発生します。 –

答えて

32

あなたがを使用しています210の幅や高さについては、質問する必要がある最初の質問は、80%何ですか?だから、あなたもそうだから今、あなたのdiv要素が100%80%になりますあなたのCSSに

html, body { 
    height: 100%; 
} 

これを使用する必要がある、あなたのこの要素はbodyタグ内にあると仮定して、親要素に高さを適用する必要があります

Demo

側注:あなたがabsolute位置付け要素を扱っているときにも、あなたがそのような場合には、あなたがする必要があるので、あなたのdivは、現在のビューポートの高さを超えないシナリオに遭遇する可能性min-height

+0

私はしばらくの間、私はボディを100%に設定していましたが、htmlではなく、ありがとう! –

5

bloque_1以外のものはすべて高さが必要です。または、0の80%が得られます。 bodyには100%の高さを適用する必要があります。

ここにはjsfiddleが掲載されています。

2

HTMLコード - あなたの親要素

<html> 
<body> 
<div id="bloque_1" style="height:80%;background:red;width:100%;"> 
</div> 
</body> 
</html> 

CSS Part-

html, body { height: 100%; width: 100%; margin: 0;background: #3c3c3c } 

ワーキングフィドルに100%高さを適用する - http://jsfiddle.net/SEafD/1/

0

Demo

html,body{ 
    height:100% 
} 
#bloque_1{ 
    background:red; 
    height:80%; 
} 
関連する問題