流体宽度并固定在中间有边框的列

Question

我有流动宽度的左列和固定宽度的右列。我需要在它们之间设置一个边界，即最高柱的高度。

这是我所拥有的简化布局：

.left {
    width: 100%;
    float: left;
}
.left-inner {
    margin-right: 275px;
    padding-right: 30px;
    border-right: 2px dotted #47718D;
}   
.right {
    float: left;
    padding-left: 30px;
    width: 275px;
    margin-left: -275px;
}
<div class="left">
    <div class="left-inner">
        Content
    </div>
</div>
<div class="right">
    Sidebar
</div>

这里有一个更详细的小提琴：http://jsfiddle.net/meaLh

如您所见，边框停止在左列内容停止的位置。两列的高度都是可变的，因此有时左列会比右列长。我怎样才能让它们相等，这样我才能让边界一直向下？

Answer 1

* {
    box-sizing: border-box;
}
.wrapper {
    width: 100%;
    max-width: 1260px;
}
.left {
    width: 100%;
    float: left;
}
.left-inner {
    margin-right: 275px;
    padding-right: 30px;
}
.right {
    float: left;
    padding-left: 30px;
    width: 275px;
    margin-left: -275px;
    border-left: 2px dotted #47718D;
}

Answer 2

边框在左列内容停止的地方停止，因为边框属性应用于左列。类似地，应用于右列的边框将在右列内容停止的地方停止。现在如果你想要边框要低于内容，您可以在列底部使用一些填充。您也可以在左右列之间使用宽度非常小的第三列，并为其应用最小高度和边框。