兩列布局，左邊一列「在」右列效果

Question

我試圖模仿這一形象：

（original image page）

有左列中的陰影效果到右列，通常我使用虛列方法，並將背景放在容器上，但對於這種情況，左列應位於右列。

編輯：我現在在此基礎上你的答案，但是，從側邊欄的背景在容器的高度不會停止（它溢出到頁面的底部）。

#map-app { 
    height: 100%; 
    min-height: 650px; 

    width: 1200px; 
    margin: 30px auto; 
    background-color: #FFFFFF; 

    .sidebar { 
     background-image: url('/data/images/map/v2/sidebar_separator.png'); 
     background-position: top right; 
     background-repeat: repeat-y; 

     position: absolute; 
     height: 100%; 
     width: 350px; 
     z-index: 9999; 
    } 

    .content-container { 
     position: absolute; 
     height: 100%; 
     width: 100%; 
     z-index: 9998; 
    } 
} 

它看起來像這樣：

---

任何建議，我怎麼能做到這一點？

Answer 1

如果你想確保左欄將直接右上方定位，顯然是使用z-index的元素，並提供左列與右邊框陰影效果。這將允許您完全用右欄填充頁面，用左欄填充一半，使用z-index將左欄的堆棧順序設置在右上方。如果您不顯示任何代碼，我將不會顯示任何代碼。有點毫無意義。

更新：你顯然需要使用的位置是：絕對的;對於兩列來說，爲了達到這個效果，你正在瞄準，如果你把它設置爲相對的瀏覽器不會讓它們重疊。

更新：如果你正在尋找兩列延伸到瀏覽器的高度，你會明顯地使用相同的容器用於和設置它的height: 100%;與具有容器的問題，左欄，右欄是，您可以將容器設置爲100％的高度，但這隻會讓您放入100％高度的內容，並不意味着內容的大小也完全是100％。我建議做是容器代碼更改爲height: 100%; width: 100%;和只設置一個<div class="container"></div>

代碼更新：

.container { 
    height: 100%; width: 100%; 
} 

.leftcolumn { // Guessing this would be your .sidebar 
    overflow: hidden; // Option 1: Set the overflow to hidden. 
    position: absolute; 
    height: 100%; width: 50%; // Option 2: Set the height slightly lower. like 99% 
    z-index: 9999; // Higher than right. 
} 

.rightcolumn { 
    position: absolute; 
    height: 100%; width: 100%; 
    z-index: 9998; // Lower than left. 
}