- 締切済み
ヘッダとフッタが固定でコンテンツのみスクロール可能
いつもお世話になります。 ヘッダ部とフッタ部は固定で、コンテンツ部のみで表示エリアを超えた場合スクロールバーを 表示する、というHTMLを実現するにはどうすればよいでしょうか。 （ウィンドウサイズに応じてコンテンツ部は変動するが、ヘッダとフッタは常に固定） イメージとしては以下の構成になります。いろいろ調べてみたのですが、ヘッダとフッタは固定 できてもスクロールバーがウィンドウ全体に表示されてしまうものばかりでした。 -------------------------------- ヘッダ（固定） （スクロールバーなし） -------------------------------- コンテンツ （スクロールバーあり） -------------------------------- フッタ（固定） （スクロールバーなし） -------------------------------- フレームは使用せず、CSSのみで実現する方法を教えて頂けませんでしょうか。 IE7、IE8で動作させたいと思っています。 宜しくお願いします。
- kamakuragengorou
- お礼率53% (132/248)
- CSS
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- LOHA
- ベストアンサー率52% (203/388)
box-sizing(CSS3)を使えばCSSだけで出来ないことも無いです。 ＃私が思いつく限りはbox-sizingしかないのですが、他にも方法があるんでしょうかね なのでIE8であればOKですが、IE7ではJavaScriptを使う以外方法はないかと思います ＃IE6なら逆にバグを利用すればできるかもしれません。 ＃IE7でもbox-sizing-polyfillがありますが、htcの内部はJavaScriptですし。。。 一応サンプルを載せておきます（IE8はOK、IE7はNG）。 ※スペースは全角 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>Test</title> <style> * { margin: 0; padding: 0; } html, body { height: 100%; } body { padding: 100px 0 100px; box-sizing: border-box; } #header { position: absolute; top: 0; height: 100px; width: 100%; background-color: #EEE; } #footer { position: absolute; bottom: 0; height: 100px; width: 100%; background-color: #EEE; } #content { height: 100%; background-color: #AAA; overflow: auto; } #content div { height: 1000px; } </style> </head> <body> <div id="header">へっだ</div> <div id="content"><div>なかみ</div></div> <div id="footer">ふった</div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
・header,footerをabsoluteで上下に固定する。 ・header,footerをfixedで固定する。 前者のほうが望ましい。 ですが、スクロールバーをsection部分にのみ表示させることはできないです。 なぜなら、heightにautoの値が指定されたとき、その算出値は内容の高さでなければならないからです。 これは、widthともっとも異なる部分です。 理由は、お分かりだと思いますが、内容を表示するに当たって、巾によって表示領域は下に長くならないとまずいからです。 詳しくはCSS2.1の仕様書の「10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements ( http://www.w3.org/TR/2004/CR-CSS21-20040225/visudet.html#inline-replaced-height )」をお読みください。CSS2から変更されています。ちなみにCSS2( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html#q16 )は訂正されました。 きちんと、具体的な値(pxなど)で指定しなければなりません。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ さすれば、sectionにスクロールバーを表示させることが出来ます。 javascriptでウィンドウ高さを求め、その値を元にスタイルシートを書き換えれば出来なくはないですが、色々問題があってお勧めしません。
お礼
返答ありがとうございます。 > javascriptでウィンドウ高さを求め、その値を元にスタイルシートを書き換えれば出来なくはないです > が、色々問題があってお勧めしません。 おっしゃるとおり、ピクセル固定であればコンテンツ部のみにスクロールを表示させることはできますよね。CSSのみでできないとなれば、JavaScriptを使用して、ウィンドウサイズのイベントを拾って、動的にサイズを変更していくしかないか、と思っていたのですが、問題というのは何でしょうか。 何か問題があるという認識がありませんでした。教えて頂けないでしょうか。 宜しくお願いします。