絶対配置されたdivは、親の高さの100％に展開されません

Question

現在、キャンバス要素をオーバーレイするdivを作成しようとしています。これらは両方ともラッパーdivに含まれています。ラッパーは固定された高さを持っていますが、オーバーレイのdivに100％の高さを追加すると、高さは0になります。ここではHTMLです：

<div id="canvas-wrap"> 
    <canvas id="canvas" style="background-image: url('<%= @post.image.url%>');"></canvas> 
    <div id="overlay"> 
    </div> 
</div> 

とCSS：

#canvas-wrap { 
    position: relative; 
    height: 400px; 
    min-height: 400px; 

} 

#canvas { 
width: 100%; 
height: 100%; 
border-radius: 7px; 
box-shadow: 2px 1px 6px #a0a0a0; 
} 



#overlay { 
    position: absolute; 
    height: 100%; 
    top: 0; 
    left: 0; 
} 

これは私がhaventはとcanvas要素を使用してイムは前にこの問題に遭遇したことを彼事実witht行うためのものです。事前にみんなに感謝します。

Answer 1

はこれを試してみてください。ここで

#overlay { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
} 

Answer 2

あなたが背景画像のプロパティを使用しています。それは要素の幅を決定しません。したがって、要素の幅の変更は期待できません。 したがって、幅ゼロではなくヌル高さが表示されます。 （高さが、ノー幅がありました）

ので、あなたのオーバーレイはまったく**幅**ので、それは表示されませんでしょう持つ親への固定幅を割り当て、その幅に

#canvas-wrap { 
    position: relative; 
    height: 400px; 
    min-height: 400px; 
    width: 600px; 
    min-width: 600px; 
} 

#canvas { 
width: 100%; 
height: 100%; 
border-radius: 7px; 
box-shadow: 2px 1px 6px #a0a0a0; 
background-size: cover; 
background-repeat: no-repeat; 
}