做一个绝对定位的div与父母相同的高度（不相对）

Question

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

.content { 
 
    /* \t 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? */ 
 
}

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

部分是：“后”分区处于centerd“主”分区与给定的宽度，我希望有一个背景的div有100％的宽度视

对不起的，这是一个有点难以解释我需要什么，所以我做一个小的草图位置：

Answer 1

这是更多钞票与大众单位，请看：

* { 
 
    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（）函数和媒体查询！