html - 高さのパーセンテージが CSS で機能しない

Question

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

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

どうすればそれを機能させることができますか？

score 40 · Accepted Answer

幅または高さを使用する場合%、最初に尋ねるべき質問は80%何ですか? したがって、親要素にも高さを適用する必要があるため、この要素が body タグ内にあると仮定すると、CSS でこれを使用する必要があります。

html, body {
   height: 100%;
}

だから今あなたのdiv要素80%は100%

サイドノート：また、配置された要素を扱っている場合、現在のビューポートの高さを超えないabsoluteシナリオに遭遇する可能性があるdivため、その場合はmin-height

score 5 · Accepted Answer

の外側のすべてにbloque_1も高さが必要です。そうしないと、0 の 80% が得られます。に 100% の高さを適用する必要がある場合もありますbody。

これは、実際の動作を示すjsfiddleです。

score 2 · Accepted Answer

100%親要素に高さを適用する

HTMLコード-

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

CSS部-

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

ワーキングフィドル - http://jsfiddle.net/SEafD/1/

score 0 · Accepted Answer

0

html,body{
    height:100%
}
#bloque_1{
    background:red;
    height:80%;
}

于 2013-05-20T05:05:18.173 に答える

4 に答える 4