右侧的 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) position absolute 同上:right:0, top:0, bottom:0 and width5) 如有必要调整 z-index

:哦

编辑:

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