Question

我用bootstrap网格格式创建了一个布局。我希望我的中心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>

任何形式的帮助都将受到高度赞赏。感谢

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>

Answer 2

试试这段代码

/* 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

Answer 3

＆＃13;

/* 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%;
}

＆＃13;

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

＆＃13;

这与您正在寻找的相同吗？

希望这有帮助。

Answer 4

在适当使用bootstrap的情况下，其他地方应该有更好的解决方案

例如 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

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

4 个答案: