ブートストラップページネータは適切

Question

私は、次のページのレイアウトを実現するために、ブートストラップ3.3.4を使用していない位置決めDIV：

• ヘッダ：トップに固定され、
• トップコンテンツ行：ページヘッダーの下に固定。
• メイン内容の行：スクロール可能なデータを含みます。
• ページネーションリンクの行：固定、フッターの上に表示する必要があります。

• フッター：底面に固定;

  ページング行を除いてセットアップしました。私は試してみましたが、何が起こっているのか分かりません。問題は、私が期待しているように、ページ区切りの行が主要コンテンツ領域の下に表示されないことです。ページ上部に表示されます。

私はそれがあるべき場所に位置決めするために管理する唯一の方法は、margin-top: 537px;を挿入しているが、私は、ウィンドウのサイズを変更すると、これはコンテンツの残りの部分と調整しません。

（私は、この問題を整理していたら、私が行うには、トップのコンテンツの行を残している）

ここでは私のコードです：

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    overflow: hidden; 
 
} 
 
.body-content { 
 
    background-color: grey; 
 
    position: absolute; 
 
    top: 22%; 
 
    bottom: 12%; 
 
    right: 0; 
 
    left: 0; 
 
    overflow: auto; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 

 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
    <!-- nav button --> 
 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
     <span class="sr-only">Toggle Navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
    </button> 
 

 
    <!-- nav branding link --> 
 
    <a class="navbar-brand navbar-right" href="#">site branding</a> 
 

 
    <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav navbar-left"> 
 
     <li class="active"><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#about">About</a> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Learn <b class="caret"></b></a> 
 
      <ul class="dropdown-menu"> 
 
      <li class="dropdown-header">Tutorials</li> 
 
      <li><a href="#">Java</a> 
 
      </li> 
 
      <li><a href="#">Python</a> 
 
      </li> 
 
      <li><a href="#">Scala</a> 
 
      </li> 
 
      <li class="dropdown-header">Code samples</li> 
 
      <li><a href="#">Java</a> 
 
      </li> 
 
      <li><a href="#">Python</a> 
 
      </li> 
 
      <li><a href="#">Scala</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 

 
<div id="pbb-content1" class="container-fluid body-content panel-group"> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
    <p>sdofjsdnvkvn</p> 
 
</div> 
 
<!-- end pbb-content1 --> 
 

 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-md-1" style="background-color: #FF9999">left</div> 
 
    <div class="col-md-10" style="background-color: #FF8888"> 
 
     <ul class="pagination"> 
 
     <li class="disabled"><a href="#">&lt;&lt;</a> 
 
     </li> 
 
     <li class="disabled"><a href="#">&lt;</a> 
 
     </li> 
 
     <li><a href="/myserverurl/1" class="active">1</a> 
 
     </li> 
 
     <li><a href="/myserverurl/2">2</a> 
 
     </li> 
 
     <li><a href="/myserverurl/3">3</a> 
 
     </li> 
 
     <li><a href="/myserverurl/4">4</a> 
 
     </li> 
 
     <li><a href="/myserverurl/5">5</a> 
 
     </li> 
 
     <li><a href="/myserverurl/6">6</a> 
 
     </li> 
 
     <li><a href="/myserverurl/7">7</a> 
 
     </li> 
 
     <li><a href="/myserverurl/8">8</a> 
 
     </li> 
 
     <li><a href="/myserverurl/9">9</a> 
 
     </li> 
 
     <li><a href="/myserverurl/10">10</a> 
 
     </li> 
 
     <li><a href="/myserverurl/11">11</a> 
 
     </li> 
 
     <li><a href="/myserverurl/2">&gt;</a> 
 
     </li> 
 
     <li><a href="/myserverurl/119">&gt;&gt;</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <div class="col-md-1" style="background-color: #FF6666">right</div> 
 
    </div> 
 
</div> 
 

 
<div id="pbb-footer" class="footer navbar-fixed-bottom"> 
 
    <div class="container-fluid" style="background-color: grey;"> 
 
    <div class="row"> 
 
     <div class="col-md-3"></div> 
 
     <div class="col-md-6"> 
 
     <p style="text-align: center;">This is the footer : wekdmtryoslcxkm4l534l5klkmdclvwperr987</p> 
 
     </div> 
 
     <div class="col-md-3"></div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

任意のアイデアをどのようになどメインページの後にページ番号を表示させることができますか？あなたはページネーションは、この行を削除メインコンテンツの後に表示されるようにしたい場合は

Answer 1

.body-content { 
background-color: grey;  
top: 22%; 
bottom: 12%; 
right: 0; 
left: 0; 
overflow: auto; 
} 

position: absolute;

コンテンツ本体スクロールしてください：

#pbb-content1{ 
height: 500px; 
overflow: scroll; 
}