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

我已经创建了自举网格格式的布局。我想我的中心div是col-md-6应该是可滚动的，左右div应该是固定的。我也检查过这个问题how to make a left and right div fixed and center div scrollable但是，当我尝试这个技巧，我没有得到预期的结果，因为自举网格格式。中心div滚动和左，右分区固定

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

任何形式的帮助将高度赞赏。由于

来源

2017-08-09 Aryan Shaw

请添加类'左，中，right'到的HTML代码发布的div。 –

没有一个答案符合正确的bootstrap实现，为列使用'col-sm-12 col-xs-12'的目的是完全荒谬的。 – kolunar

试试这个代码

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

来源

2017-08-09 06:06:30 Bhargav

但滚动条应该在右侧。像fb –

现在我把jones小提琴的athore代码检查它 – Bhargav

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

我这与你正在寻找的一样吗？

希望这会有所帮助。

来源

2017-08-09 06:16:41

没有兄弟。我不想在页面中间的滚动条。我想要最右边的那个scollbar。 –

你在你的问题中写过'我希望我的中心div是col-md-6应该是可滚动的，左右div应该是固定的。那是什么意思？ –

@AryanShaw，已更新的答案。 –

使用此代码： -

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>

来源

2017-08-09 06:50:33

应该有一个更好的解决方案在其他地方与正确使用引导程序

例如对于例如0

无论如何，这里是我的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

来源

2017-08-09 08:56:06 kolunar

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

回答

相关问题