全高＆＃34;侧边栏＆＃34;主要内容

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;
}

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

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

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

Answer 2

你可以用一点点jQuery来做这件事。我刚刚推出了我的网站，我有2个侧栏和1个内容与你的相同。我也在使用bootstrap。为这两个侧栏提供相同的班级.sidebar

创建一个这样的函数：

function sidebarHeight() {
  var containerHeight = $('.wrap').height();
  $('.sidebar').height(containerHeight);
}

然后在窗口加载上运行您的函数并调整大小

$(window).load(sidebarHeight);
$(window).resize(sidebarHeight);

您可以在Codepen上看到该演示。 我在我的博客Andwecode.com

上写了一篇简短的教程