残りの垂直スペースを埋めるDIVの自動スクロールバーを設定するにはどうすればよいですか？

私はサイドバーを持つwebappを書いています。 Webアプリケーションは、画面全体（絶対配置、高さ/幅100％）を塗りつぶすdivに収まります。サイドバーの上部にはタイトルとロゴ（固定高さ）があり、下にはアイテムのリストを含むdivがあります。表示可能なサイドバーをオーバーランさせる場合は、このリストをoverflow: autoに設定します。私はmax-height: 100%をサイドバーに使ってみましたが、これはスクロールバーを呼び出さないようです。 divがサイドバーの残りの垂直スペースを埋めるようにするにはどうしたらいいですか？コンテンツが可視領域をオーバーランするとスクロールバーが表示されますか？残りの垂直スペースを埋めるDIVの自動スクロールバーを設定するにはどうすればよいですか？

+--------------------------------------------------------------------------+ 
| #app_pane                | 
| +------------------+              | 
| | #sidebar   |              | 
| | +--------------+ |              | 
| | | #logo  | |              | 
| | |    | |              | 
| | | height: 50px | |              | 
| | |    | |              | 
| | +--------------+ |              | 
| | +--------------+ |              | 
| | | #list  | |              | 
| | |    | |              | 
| | |    | |              | 
| | |   <----+-+-----------o fill remaining height     | 
| | |    | |    and display scrollbars if necessary | 
| | |    | |              | 
| | |    | |              | 
| | |    | |              | 
| | |    | |              | 
| | |    | |              | 
| | |    | |              | 
| | |    | |              | 
| | |    | |              | 
| | |    | |              | 
| | |    | |              | 
| | |    | |              | 
| | +--------------+ |              | 
| +------------------+              | 
+--------------------------------------------------------------------------+

編集：まあ、私はcalc()とCSS3でそれを行うことができますように見えますが、私は、従来のブラウザがサポートするソリューションを好むだろう。

出典

2012-01-09 Willi Ballenthin

これはJavaScriptの少し助けを必要とします。 'max-height：100％'はそのトリックをしません。従来のブラウザではブラウザのサポートに関して、どれくらい前に戻る必要がありますか？ – moey

私は限られていますが技術的な聴衆をターゲットにしています。だから私は過去2年以内にブラウザを期待しており、最先端は望ましくない。 –

だからこのようなものが欲しいですか？ http://jsfiddle.net/9uJDZ/1 – mrtsherman

このレイアウトは、柔軟なボックスレイアウトプロパティを使用して実現することができますが、現在のところFirefox (since version 1)でのみサポートされています。これは、スクロールバーの問題を解決するために、 Safari (since version 2 or 3) and Chrome (since version 1)。

http://jsfiddle.net/gTAKL/

あなたはdisplay: -webkit-boxに#sidebarを設定した場合、あなたはそれが他の#sidebarの子供たちが使用していないすべてのスペースを取る作るために#listに-webkit-box-flexプロパティを使用することができます。 overflow-y:scrollを#listに適用すると、その内容が内部に収まらない場合はスクロールバーが表示されます。ここで

は、柔軟なボックスのプロパティのいくつかの情報です：

IE 9をサポートしていますが、私は、Internet ExplorerとOperaのための任意の同等の特性を知りませんcalc()。

出典

2012-01-09 09:17:15

この回答ありがとうございます。私は柔軟なボックスレイアウトのプロパティを知らなかったし、それは合理的なアプローチのようだ。私はそれを撃つだろう。 –

@WilliBallenthinあなたは大歓迎です。 IEとOperaには同等のものはないが、理論的にはモジュールはCSSが伝統的に扱えなかったレイアウトには本当に便利だと思われる。 –

100％の高さのサイドバーを取得するには、おそらくFaux Columnが必要です。これは非常に一般的に使用されています。これは、完全な高さの列の外観を与えることです。 http://jsfiddle.net/9uJDZ/24/

出典

2012-01-09 08:00:23

あなたはフィドルでリストの明示的な高さを使用します。リストを利用可能なすべてのスペース（高さ：100％のようなもの）に展開しますが、含まれているdivを超えてはなりません。あなたのアプローチを使ってこれを行うことはできますか？ –

残りの垂直スペースを埋めるDIVの自動スクロールバーを設定するにはどうすればよいですか？

答えて

関連する問題