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%; 1つだけを設定することです <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 に答える