css - 左列 "over"右列效果的两列布局

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;对于两列，为了实现您的目标效果，如果将其设置为相对，浏览器将不允许它们重叠。

更新:如果您希望将两列都拉伸(stretch)到浏览器的高度，您显然会为两者使用相同的容器并将其设置为 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.
}