0

左右の列をウィンドウの高さに合わせて、ユーザーにスクロールバーを提供して、2 つの列を個別にスクロールしたいと考えています。これどうやってするの？

試してみましたがmin-height: 100%、height: 100%どこで使用してもうまくいかないようです。

ここで JSFiddle をセットアップします: http://jsfiddle.net/Legend/t5cUA/1/

編集：追加したくありませんposition: fixed。ユーザーがブラウザウィンドウの幅を縮小した場合でも、列を揃えたいと思います。

4

3 に答える 3

2

左右の列の内容を個別にスクロールしたい場合は、追加する必要があります

overflow: auto;

それはCSSです。また、100％の高さは、相対ブロックまたは絶対ブロックの子、または定義された高さのブロックの子に設定できることに注意してください。

于 2013-02-21T20:17:35.320 に答える
2

以前のすべてのラッパーがとに設定されていることを確認する必要がheight: 100%ありoverflow: hiddenます。このフィドルショーのようなもの（正確に何が欲しいかに応じて、いくつかの調整が必要になる場合があります）：

html, body, .container-fluid, .container-fluid > .row-fluid {
    height: 100%;
    overflow: hidden;
}

.span-fixed-sidebar {
    height: 100%;
    overflow: auto;
}

明確化からの更新

プロセスをより深く継続する必要があります。重要なのは、スクロールする実際の列要素にスクロールを設定し、他のすべてを明示的にに設定し、その列をラップする必要があるということheight: 100%ですoverflow: hidden。おそらくこれはあなたのためです：

html, body, .container-fluid, .container-fluid > .row-fluid, .span-fixed-sidebar {
    height: 100%;
    overflow: hidden;
}

.span-fixed-sidebar > div {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
于 2013-02-21T20:18:17.717 に答える
1

質問を理解できるかどうかはわかりませんが、ウィンドウの高さまでスパンして、列がウィンドウよりも高い場合にスクロールを配置する場合は、次のようになります。

.column {
  overflow: auto /* scroll */;
  height: 100%;
}

編集：はい、overflow: auto列が十分に高くない場合にスクロールを表示したくない場合は、より良いオプションになります。

于 2013-02-21T20:06:26.943 に答える