0

実際のアプリのように感じさせたい Web アプリに取り組んでいるので、実際の Web サイトがブラウザーの高さの 100% を占めるようにし、特定のペインをスクロールできるようにしたいと考えています。常に見えるだけです。

以下は、ペインの潜在的なセットのモックアップです。列には、内容によって高さが可変のペインがあり、残りのスペースを埋めるスクロール可能なペインがあります。一部の列には、スクロール可能な div が 2 つある場合があります (ただし、これは重要ではありませんが、そのうちの 1 つに高さが定義されている可能性があります)。高さ固定の div は、パーセンテージまたはピクセルを使用して高さを決定できます。

レイアウト例

私の希望は、スクロール可能なペインを残りの高さで埋めるために使用できる単純な Jquery があることです。単に「fillheight」クラスまたはそのような単純なものを追加するだけです。

これに対するいくつかの CSS ソリューションを見たことがありますが、それらはヘッダーとフッターを必要としたり、列のすべてのペインで多くの特定のスタイルを必要とするため、異なるページに異なるペインを簡単に作成することが難しくなります。私の場合、スクロール可能なペインを任意の場所に配置したいと考えています。場合によっては、上部、中央、または下部にネストされている可能性もあります。

私はスクリプトJquery Layoutを見て、その可能性が気に入りましたが、必要なものには少しやり過ぎです。サイズを変更して折りたたむのはいいことですが、それは本当に必要ありません。また、スクリプトはサポートされていないようです。これを商用製品で使用する場合、サポートされていない古いスクリプトに依存したくありません。できれば、完全なプラグイン/フレームワークではなく、単純なスクリプトが必要です。

どんな助けでも大歓迎です！解決策が見つかったら、この投稿を更新します。

更新 1:

私は解決策を見つけたと思います。結局、CSSのみを使用しています。これは、@crafter にリンクされたソリューションに基づいています。上記で説明したすべてのユースケースを示す jsfiddle を作成しました。

http://jsfiddle.net/8BHM6/4/

これを機能させるための鍵の一部は、静的ペインに次を使用することでした。

.static-pane {
    position:absolute;
    width:100%;
    height: 15%;
    top:0;
}

残りの高さを埋めるペインについては、次のようになります。

.fill {
    width:100%;
    height:auto;
    overflow:auto;
    top:15%;
    bottom:0;
}

(さらに多くのコードが含まれていることに注意してください。jsfiddle を参照してください)

Chrome と IE 10 では問題なく動作するようですが、Firefox は、コンテンツが途切れる原因となるスクロールバーを提供するように設定した overflow:auto を無視しているようです。これをFirefoxで動作させる方法はありますか?

更新 2:

firefoxのバグを修正しました。すべての要素に を適用してbox-sizing:brder-boxいましたが、どうやらそれは Firefox では機能しないため、ブラウザ固有のバージョン-moz-box-sizing:border-boxをそれらにも適用する必要がありました。これにより、Firefox のすべての問題が解決されました。

更新されたフィドル: http://jsfiddle.net/8BHM6/6/

更新 3:

Safari でスクロール可能な div のスクロールバーが表示されないという問題が見つかりました。スクロールバーのスタイルを設定して強制的に表示するこのコードを使用して修正しました。クロムのスクロールバーのスタイルも設定されていることに注意してください。これは実際には見栄えがします。

.fill::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 10px;
}
.fill::-webkit-scrollbar-track {
    background-color: rgba(0,0,0, .3);
    border-radius: 0px;
}
.fill::-webkit-scrollbar-thumb {
    border-radius: 0px;
    background-color: rgba(255,255,255, .4);
}

IE9 にはまだ問題がありますが、スクロールバーが表示されたときに左に行き過ぎています。これについてはまだ調査中ですが、Chrome、Safari、Firefox、Opera は現在すべて動作しています。

更新されたフィドル: http://jsfiddle.net/8BHM6/7/

更新 4:

IE9 のバグを修正しました。box-sizing:border-boxIE9 はオーバーフローと組み合わせると気に入らないようです。そのため、動作する IE9 ハックを追加しましたbox-sizing:content-box\9;。

更新されたフィドル: http://jsfiddle.net/8BHM6/8/

このフィドルの簡易版を使用して、最終的な解決策を以下の回答として投稿しました。

4

1 に答える 1