我目前正在尝试实现以下场景:
我正在使用以下 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 中的确切代码放在问题中,给出的答案存在一些误解。
最佳答案
如果浏览器兼容性不是问题,您可以使用 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
关于html - 全高 "sidebars"主要内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28567874/