使绝对定位的div与父级（非相对）相同的高度

Question

我希望在内容div上通过鼠标悬停在后台（浏览器的宽度为100％）中设置div。一切都很好，但我不知道是否有一个解决方案，使背景div作为父亲的高度？ 不使用Jquery？纯CSS会很棒！ 谢谢！

＆＃13;

＆＃13;

.content {
  /* 	position: relative;  >> will make the absoluted positioned div 100%width of the browser*/
  z-index: 1;
}
.background {
  position: absolute;
  background: aqua;
  width: 100%;
  right: 0px;
  left: 0px;
  z-index: -1;
  display: none;
}
.post:hover .background {
  display: block;
  height: 10%;
  /* WHAT TO DO? */
}

＆＃13;

<div class="post">
  <div class="content">
    <div class="background"></div>
    …content…
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

问题的一部分是：＆＃34; post＆＃34; div位于一个中心位置＆＃34; main＆＃34;具有给定宽度的div，我想要一个具有100％视口宽度的background-div

很抱歉，解释我需要的内容有点难，所以我在这里做了一个小草图：

Answer 1

这与vw单位一致，看：

* {
  margin: 0;
  padding: 0;
}
.main {
  background: #29D;
  margin: 0 auto;
  max-width: 800px;
}
.post {
  background: #E31;
  margin: 3vw 3vw 3vw 12vw;
}
.content {
  background: #8D5;
  margin: 2vw;
}
.content img {
  width: 100vw;
  margin-left: -14vw;
  display: block;
}
@media(min-width: 800px) {
  .content img {
    margin-left: calc(800px / 2 - 50vw - 14vw);
  }
}

<div class="main">
  .main
  <div class="post">
    .post

    <div class="content">
      .content
      <img src="http://s3.postimg.org/3k8v5p0v7/dragon.jpg">
    </div>

    <div class="content">
      .content
    </div>

    <div class="content">
      .content
    </div>
  </div>

</div>

您需要知道的第一件事是包装器的最大宽度。就我而言，它是800px。您必须用您的尺寸替换所有800的。然后请注意，所有左边距应为vw单位或像素，但不是100％。 这里的技巧是calc（）函数和媒体查询！