两列布局，左列＆＃34; over＆＃34;右栏效应

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将左列堆栈顺序设置在右上方。如果您不显示至少一段您所拥有的内容，我将不会为您显示任何代码。有点无意义。

更新：您显然必须使用position：absolute;对于这两个列，为了达到这个效果，你的目标是，如果你将它设置为相对，浏览器将不允许它们重叠。

更新：如果您希望将两列扩展到浏览器的高度，您显然会同时使用相同的容器并将其设置为 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.
}