中央のdivスクロールと左、右のdivを固定

私はブートストラップグリッド形式でレイアウトを作成しました。私はcol-md-6である私の中心のdivがスクロール可能で、左右のdivが修正されるべきであることを望みます。私もこの質問をチェックしましたhow to make a left and right div fixed and center div scrollableしかし、私はこのトリックを試したときに、ブートストラップグリッドフォーマットのために期待された結果が得られません。ヘルプの任意の種類が非常に高く評価されるだろう中央のdivスクロールと左、右のdivを固定

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

：

は、ここに私のHTMLコードです。おかげ

出典

2017-08-09 Aryan Shaw

、 '左クラスを追加センター、掲載コードのHTML divタグにright'してください。 –

答えが適切なブートストラップの実装に準拠していないので、 '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 –

のようにjsフィドルにコードを書いています。 – 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>

Iこれはあなたが探しているものと同じですか？

これが役に立ちます。

出典

2017-08-09 06:16:41

No bro。私はページの中央にスクロールバーが必要ない。私は右のほうにスカルバーが欲しい。 –

あなたはあなたの質問に「私はcol-md-6である私の中心divをスクロール可能にし、左右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

適切に使用してどこか別のより良い解決策があるはずですのブートストラップ

たとえば

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

出典

2017-08-09 08:56:06 kolunar

中央のdivスクロールと左、右のdivを固定

答えて

関連する問題