HTML：サイドバー+現在のページサイズ

Question

に設定高さのdivをスクロール、私はサイドバー

#sidebar { 
    float: left; 
    position: relative; 
    width: 200px; 
    padding: 20px; 
} 

と本体があります。

#main { 
    margin: 0 20px 0 260px; 
} 

を私はサイドバーを持っているページがあり、メインは、静的にとどまるべき一組のフィルターと、ページに収まるには高すぎると幅が広い表から構成されます。私は、divを常にページの右と下に伸び、ページのサイズが変更された場合はサイズを変更するように、独自のスクロールdivにテーブルを持っていたいと思います。これまでのところ、私はこれを持っています：

<div id="sidebar"> 
    <div class="boxed" id="menu"> 
     <h2 class="title">Main Links</h2> 
     <div class="content"> 
     <ul> 
      <li><a href="/">Main page</a></li> 
     </ul> 
     </div> 
    </div> 
    </div> 
    <div> 
    <div id="main"> 
     <h2>Header</h2> 
     <div class="filters"> 
     Filters go here 
     </div> 
     <div style="overflow: auto;">   
     <table><!-- very large table --></table> 
     </div> 
    </div> 
    </div> 

テーブルが現在のページに収まらない場合を除いて、これは完全に動作します。何が起こるかは、scrolling-divの下のスクロールバーがページにないことです。ページにはメインの垂直スクロールバーがあり、スクロールするとdivの水平スクロールバーに到達します。私はdivがページの下部を過ぎて成長しないと思っていますが、私はこの問題を抱えません。

この問題を解決するにはどうすればよいですか？私はこれをやってみました：

<div style="overflow: auto; position: absolute; top:0;right:0;bottom:0;left:0;"> 

しかし、これはちょうど左のサイドバーを含む全体ページを、合わせてのdivストレッチを行いました。

Answer 1

あなたのコードは、ページ全体をカバーするようにdivを設定します。 （左から200pxの、あなたが20ピクセルのパディングをしたいように見えますので、220）下のスクロールバーのよう

<div style="overflow: auto; position: absolute; top:0;right:0;bottom:0;left:220px;"> 

を、私は設定をお勧め：あなたのサイドバーの幅を反映するように変更「幅：」あなたのテーブル要素のために。

table { 
    width: 700px; 
}