絶対配置されたブロックの高さのパーセンテージ

Question

これは実際の問題ではなく、好奇心によって動機づけられた問題です。私はcssをよく理解しようとしています。

パーセンテージの高さ（および幅）は、収容ブロック（see here）に対して相対的であると想定されます。

絶対配置されたブロックの包含ブロックは、「位置付け」された最も近い祖先（すなわち、絶対、相対または固定-see here）です。

だから私は、この例では、内側のdivが全体利用できる高さに及ぶことを期待する：

#main-block { 
    height: 100%; 
    background-color: red; 
} 

それともthis fiddleを取る：このCSSで

<div class="full-height"> 

    <div> 
    <div id="main-block"> 
    x 
    </div> 
    </div> 

</div> 

html, body, .full-height { 
    height: 100%; 
    position: relative; 
} 

を。

ここで何が起こっているのですか？

Answer 1

あなたはメインブロックを絶対に配置していません。それをして、それは完全な高さを取るでしょう。

html, body, .full-height { 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
#main-block { 
 
    height: 100%; 
 
    background-color: red; 
 
    position:absolute 
 
}

<div class="full-height"> 
 

 
     <div> 
 
     <div id="main-block"> 
 
     x 
 
     </div> 
 
     </div> 
 

 
    </div>

Answer 2

問題は単純に、#main-blockの親である追加の<div>があり、これには高さが設定されていません。 のこの要素の高さを100%と指定しないと、のデフォルトのの高さしか使用されません。 <div>の場合は、0pxです。

#main-blockこの追加の<div>の高さの100%（親ではない）を占有しようとする試み。 #main-blockにコンテンツ（x）がある場合、自動的に展開されてコンテンツが表示されるようになります。この余分な<div>を削除

は

予想通り、赤色の背景でページ全体を展示：

html, body, .full-height { 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
#main-block { 
 
    height: 100%; 
 
    background-color: red; 
 
}

<div class="full-height"> 
 
    <div id="main-block"> 
 
    x 
 
    </div> 
 
</div>

を逆に、この余分な親<div>を維持し、それを100%ますの高さを与えますまたはあなたにフルハイトの赤い背景を与えます。これは、#main-blockコンテンツ自体の幅と同じくらい幅があることに注意してください。

html, body, .full-height { 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
#main-block { 
 
    height: 100%; 
 
    background-color: red; 
 
} 
 

 
.full-height > div { 
 
    position: absolute; 
 
    height: 100%; 
 
}

<div class="full-height"> 
 
    <div> 
 
    <div id="main-block"> 
 
     x 
 
    </div> 
 
    </div> 
 
</div>

も<div>ためデフォルト位置がstaticであることに注意を：あなたは、それは完全な幅になりたい場合は、heightに加えてwidthを指定する必要があります、absoluteではありません。

希望すると便利です。 :)