两列布局，左边一列“在”右列效果

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. 
}