に設定高さのdivをスクロール、私はサイドバーHTML:サイドバー+現在のページサイズ
#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ストレッチを行いました。
hmmはサイドバーで動作しますが、ページの上部もカバーします(タイトルとフィルタ)。どのようにそれらを説明しますか?フィルタは可変の高さを持つかもしれないので、私は絶対的な配置がうまくいくかどうかはわかりません。私はそのdivの上部をフィルタの底に設定する必要があります – Claudiu
これは確かに解決策でした。ページのトップは、「トップ」のピクセルの量を変更することによって解決されました – Claudiu