html - 中心 div 滚动和左，右 div 固定

Question

我已经创建了一个 Bootstrap 网格格式的布局。我希望我的中心 div 是 col-md-6 应该是可滚动的，左右 div 应该是固定的。这个问题我也查过了how to make a left and right div fixed and center div scrollable但是当我尝试这个技巧时，由于 Bootstrap 网格格式，我没有得到预期的结果。

这是我的 HTML 代码:

/* Using this CSS is giving me unexpected result.*/

.left {
  position: fixed;
  left: 0px;
  float: left;
}

.right {
  position: fixed;
  right: 0px;
  float: right;
}

.center {
  position: absolute;
  left: value;
  float: left;
}

<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
  LEFT DIV
</div>

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
  MIDDLE DIV
</div>

<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
  RIGHT DIV
</div>

我们将不胜感激任何形式的帮助。谢谢

Answer 1

使用此代码:-

CSS :-

.left_div {
    position: fixed;
    left: 0px;
    float: left;
    border: 1px solid rgba(204, 204, 204, 0.32);
    width: 200px;
    height: 100%;
    text-align: justify;
    padding: 10px;
}

.right_div {
    position: fixed;
    right: 0px;
    float: right;
    border: 1px solid rgba(204, 204, 204, 0.32);
    width: 200px;
    height: 100%;
    text-align: justify;
    padding: 10px;
}

.center_div {
    position: relative;
    text-align: justify;
    border: 1px solid rgba(204, 204, 204, 0.32);
    width: auto;
    height: 100%;
    padding: 10px;
}

html :-

    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
        <div class="left_div"> left div   </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <div class="center_div">  left div  </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
        <div class="right_div"> left div  </div>
    </div>