web-dev-qa-db-ja.com

bootstrap 3列内のスクロール可能なdivの高さを修正

私は同様の質問を見ましたが、私がやろうとしているようなものはありません。ほとんどの例では、col-md-2全体をスクロールします。スクロールするには、その中にコンテンツが必要です。

流体コンテナ内には、左側のナビゲーションタイプの列と右側のコンテンツの列があります。

左の列の中に、最上部のclass = "top"にdivを、最下部のclass = "bottom"にdivを配置します。そして、真ん中にリストがあります。下部と上部が100ピクセルだとしましょう。リストが2つの間のすべてのスペースを占めるようにし、リストの内容がこの領域よりも大きい場合は、スクロールするようにします。リストの内容が2つの間のスペースよりも小さい場合は、そのすべてのスペースを占めるようにします（折りたたみではありません）。

疑似サンプルは次のとおりです。

<div class="container-fluid">
    <div class="row">
         <div class="col-md-2">

            <div class="top">
                . . .
            </div>

            <div class="scroll-area">
                <ul>
                    <li>one</li>
                    . . .
                    <li>one-thousand</li>
                </ul>
            </div>

            <div class="bottom">
                . . .
            </div>

         </div> 
         <div class="col-md-10 content">
         </div>
    </div>
  </div>

  <style>
   .top, .bottom { height: 100px; }
  </style>

以前はbootstrapなしでこれを行うことができました。 "scroll-area"絶対位置を指定することにより、スクロール領域を固定位置で動作させることができますが、 "col-md-2折りたたまれているため、「下」が上になります。

enter image description here

この作業を行うにはどうすればよいですか？

htmlcsstwitter-bootstrap-3
10
user210757

この答えは、ウィンドウの高さがわからない場合に使用します。

Position：absolute;を使用してこれを実現できます。青と赤の部分に上下を指示し、緑の部分の上部に100ピクセルを指定し、css 'calc'を使用して高さを取得します。

スタイル

.side{
  position:fixed;
  top:0;
  left:0;
  height:100%;
  padding:0;
}

.scroll-area{
  width:100%;
  height:calc(100% - 200px);
  margin-top:100px;
  background-color:green;
  float:left;
  overflow-y:scroll;
}

html

<div class="row">
       <div class="col-md-2 col-xs-2 side">
          <div style="position:relative;width:100%;height:100%;">
            <div class="top" style="background-color:red;top:0;width:100%;height: 100px; position:absolute;">
                top
            </div>

            <div class="scroll-area">
                <ul>
                    <li>one</li>
                </ul>
                <div style="width:100%;height:10000px;">
                </div>
                <ul>
                    <li>one-thousand</li>
                </ul>
            </div>

            <div class="bottom" style="background-color:blue;bottom:0;width:100%;height: 100px; position:absolute;">
                bottom
            </div>
          </div>

       </div> 
       <div class="col-md-10 col-xs-offset-2 content col-md-offset-2">
         <div style="height:1000px;width:100%;">

         </div>
       </div>
  </div>

このフィールドを見てください-

https://jsfiddle.net/jxo6pmju/12/

6
BinaryGhost

ここで、問題が発生した場合のフィドルリンクを追加しました。これが役立つことを願っています `

<div class="fixed">
  <b>Fixed Content</b>
  <br/>
  <br/>
  <p>top</p>
</div>
<div class="scrollit">
  <b>Scroll Content</b>
  <br/>
  <br/>
  <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>


</div>
<div class="fixed">
  <b>Fixed Content</b>
  <br/>
  <br/> bottom
</div>

スクロール可能な中央セクション

2
Neerav Patel