ブートストラップSImpleサイドバー - オーバーラップの下のコンテンツ

Question

私はサイドバーテンプレート（https://startbootstrap.com/template-overviews/simple-sidebar/）を使用しています。サイドバーの下のコンテンツとサイドバーの右側のコンテンツが必要です。それはうまく動作しますが、ウィンドウのサイズを変更すると、下のコンテンツがオーバーラップし、一番上まで移動します。

私はこのようなものだ：私は「コンテンツ・以下」リサイズ後にトップにすべての道を行くから、それを防ぐためにコンテナを置くべき

<div id="wrapper"> 

    <!-- Sidebar --> 
    <div id="sidebar-wrapper"> 
     <ul class="sidebar-nav"> 
      <li class="sidebar-brand"> 
       <a href="#"> 
        Start Bootstrap 
       </a> 
      </li> 
     </ul> 
    </div> 
    <!-- /#sidebar-wrapper --> 

    <!-- Page Content --> 
    <div id="page-content-wrapper"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <h1>Simple Sidebar</h1> 
        <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p> 
        <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p> 
        <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- /#page-content-wrapper --> 

</div> 

<!-- /#wrapper --> 
<div id="content-below"> 

</div> 

を？

Answer 1

だけでCSSの次のセクションをコメントアウト：

#page-content-wrapper { 
    width: 100%; 
    /* position: absolute; */ 
    padding: 15px; 
} 

例を参照してくださいここでcodepen

は