中心 div 滚动和左，右 div 固定答案

【问题标题】：Center div scroll and left ,right div fixed中心 div 滚动和左，右 div 固定
【发布时间】：2018-01-16 20:53:14
【问题描述】：

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

这是我的 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>

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

【问题讨论】：

请将left,center,right 类添加到已发布代码中的 html div 中。
没有一个答案符合正确的引导实现，将col-sm-12 col-xs-12 用于列的目的是完全荒谬的。

标签： html twitter-bootstrap css alignment

【解决方案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>

【讨论】：

【解决方案2】：

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

.outer_div{
  height:200px;
  overflow:auto;
  width:100%;
}

.left {
  position: fixed;
  float: left;
  height:100%;
  width:25%;
  
}

.right {
  position: fixed;
  float: right;
  height:100%;
  width:25%;
  right:0;
  
}

.center {
  float: left;
  width:50%;
  position:relative;
  left:25%;
  
  height:100%;
}

<div class="outer_div">

<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
  <div class="left">Left Div</div>
</div>

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
  
  <div class="center">
    MIDDLE Div
  <div>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
  </div>
  </div>
  
  
</div>

<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
  <div class="right">Right Div</div>
</div>
</div>

这和你要找的一样吗？

希望这会有所帮助。

【讨论】：

没有兄弟。我不想要页面中间的滚动条。我最想要那个scollbar。
你在你的问题中写了I want my center div which is col-md-6 should be scrollable and left and right div should be fixed。这是什么意思？
@AryanShaw ，更新答案。

【解决方案3】：

试试这个代码

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

.main {
  width: 100%;
  overflow: hidden;
}

.col-lg-3 {
  float: left;
  width: 33%;
}

.col-lg-6 {
  float: left;
  width: 33%;
  height: 100px;
  overflow-y: scroll;
}

<div class="main">
  <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
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
  </div>

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

试试这个jsfiddle code：code for center div scroll

【讨论】：

【解决方案4】：

正确使用引导程序应该有更好的解决方案

例如Affix，无论如何，这是我的 2 美分。

.container-fluid.main{
  height: 100%;
  overflow: auto;
}
.left,.right{
  background-color: #ddd;
  min-height: 200px;
}
.center {
  background-color: #eee;
}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>

<div class="container-fluid main">
  <div class="row">
  
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
      <div class="left affix">
        <div class="well col-lg-3 col-md-3 col-sm-3 col-xs-3">
          <h2>LEFT DIV</h2>
<p>Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</p><br />
        </div>
      </div>
    </div>

    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <div class="center">
        <h2>MIDDLE DIV</h2>
<p>Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</p><br />
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p><br />
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.  </p><br />
<p>Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</p><br />
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p><br />
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.  </p><br />
<p>Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</p><br />
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p><br />
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.  </p><br />
<p>Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</p><br />
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p><br />
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.  </p><br />
<p>Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</p><br />
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p><br />
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.  </p><br />
<p>Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</p><br />
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p><br />
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.  </p><br />  
        </p>      
      </div>
    </div>

    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
      <div class="right affix">
        <div class="well col-xs-12">
          <h2>RIGHT DIV</h2>
<p>Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</p><br />
        </div>
      </div>
    </div>
    
  </div>
</div>

</body>
</html>

另请参阅： Bootstrap Right and Left Sidebars Fixed snippet

【讨论】：