與CSS重疊的邊框

Question

我有一個網頁標題，我試圖使邊框重疊。這裏是我所擁有的一個簡化版本jsfiddle。 這就是我的目標爲：（圖像的第二行是如果頁面寬度減小，會發生什麼）

我嘗試使用綠色（標誌）的絕對定位，但是這導致菜單（黃色）與徽標重疊，而不是像現在發生的那樣在頁面上垂直堆疊。

我的下一個想法是給邊界（紅色）絕對定位，但在各種嘗試中，我似乎總是以頁面頂部的邊框結束，就像標題div忽略高度的標識/菜單。這是成立類似：

#header { 
    position: relative; 
} 
#border { 
    position: absolute; 
    bottom: 0; 
} 

如何對此進行設置任何建議，無論是固定我有什麼或完全嘗試不同的做法？

編輯： 這就是爲什麼我試圖做到這一點，使用相同的顏色更好的描述（爲什麼重疊，爲什麼黃色菜單應在標誌結束）：

Answer 1

所以像這樣？

綠色塊與紅色邊框重疊。

編輯 -添加百分比寬度和@media查詢，以便它調整大小。

Have a fiddle!

HTML

<div id="header"> 
    <div id="menu"> 
     Contents 
    </div> 
    <div id="logo"></div> 
</div> 

CSS

#header { 
    width: 100%; 
    max-width: 700px; 
    min-width: 320px; 
    height: 200px; 
    position: relative; 
    background: blue; 
} 
#logo { 
    background: green; 
    height: 80px; 
    width: 190px; 
    position: absolute; 
    top: 80px; 
    left: 40px; 
} 
#menu {  
    height: 40px; 
    width: 300px; 
    background: yellow; 
    display: block; 
    position: absolute; 
    top: 80px; 
    right: 0; 
} 
@media screen and (max-width: 600px) {  
    #menu { 
    top: 30px; 
    } 
} 
#header:after { 
    content:''; 
    height: 80px; 
    width: 100%; 
    display: block; 
    position: absolute; 
    bottom: 0; 
    background: #F00; 
}