0

我试图模仿这个形象：

在此处输入图像描述

（原图页面）

从左列到右列有阴影效果，通常我使用假列方法并将背景放在容器上，但在这种情况下，左列应该在右列之上。

编辑：我现在有这个基于你的答案，但侧边栏上的背景不会停在容器的高度（它溢出到页面底部）。

#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;
    }
}

它看起来像这样： 在此处输入图像描述

关于我如何实现这一目标的任何建议？

4

1 回答 1

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.
}
于 2013-10-20T20:13:44.243 回答