做一個絕對定位的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（）函數和媒體查詢！