html - 全高 "sidebars"主要内容

Question

我目前正在尝试实现以下场景:

我正在使用以下 HTML 和 CSS 代码。 ( See JSFiddle for example )

HTML:

<div class="wrap">
            <div class="col-xs-2 sidebar"></div>
            <div class="col-xs-8"> Main Content That goes a long way down on the page.. <div style="height:2000px"></div>
            <div class="col-xs-2 sidebar left"></div>
</div>

CSS:

.wrap{ height: 100%; }
.sidebar{
    border-right:1px solid red;
    padding:0;
    min-height:100% !important;
    position:relative;
    background:gray;
}
.sidebar .left{
    border-left:1px solid red;
}

现在上面的代码输出如下:

更新将 fiddle 中的确切代码放在问题中，给出的答案存在一些误解。

Answer 1

如果浏览器兼容性不是问题，您可以使用 Flexbox

.wrap { 
    height:100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.sidebar{
    border-right:1px solid red;
    padding:0;
    min-height:100% !important;
    position:relative;
    background:gray;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.sidebar .left{
    width: 200px;
    border-left:1px solid red;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.col-xs-8 {
    border-left:1px solid blue;
    border-right:1px solid blue;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

Updated Fiddle