右侧 CSS 列，与容器高度相同

Question

我有一个容器，里面有 2 个 div。第一个位于容器的左侧，第二个(rightBarItems)应位于右侧，但我希望其高度与容器的高度相同。基本上，我在右侧创建一列。

HTML:

<div class="container">
        <div class="itemMain"><?php include("itemMain.php"); ?></div>
        <div class="rightBarItems"><?php include("rightBarItems.php"); ?></div>
</div>

CSS:

.container {
    overflow: hidden;
    background: white;
    padding-right: 20px;
    -webkit-box-shadow: 4px 2px #492409,  -4px 0 2px #492409;
    -moz-box-shadow: 4px 0 2px -6 #492409,  -1px 0 2px #492409;   
    box-shadow: 4px 0 2px  #492409,  -4px 0 2px #492409;
}

Answer 1

两种干燥解决方案(都有各自的问题)

第一个:

1) 相对于容器的位置 2) 并使左侧元素 float 。 3)绝对定位右侧元素并设置其顶部:0和底部:0，右侧和宽度

当然，问题是左侧容器的内容应该大于右侧的内容

第二个(如果你可以向 html 添加更多元素): 1)相对于容器的位置 2) float 左右容器 3)创建一个新的div，作为右侧元素的“bg” 4) 绝对位置与之前相同:right:0、top:0、bottom:0 和宽度 5) 如有必要，调整 z-index

:哦

编辑:

后一个解决方案的快速示例:http://jsbin.com/ecaced/1