Question

我目前正在尝试创建一个覆盖canvas元素的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;
}

这是否与事实有关，因为我使用canvas元素，因为我之前没遇到过这个问题。在此先感谢大家。

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;
}

绝对定位的div不会扩展到父母身高的100％

2 个答案: