ヘッダとフッタが固定でコンテンツのみスクロール可能

締切済

質問者：kamakuragengorou
質問日時：2012/05/08 01:54
回答数：2件

いつもお世話になります。

ヘッダ部とフッタ部は固定で、コンテンツ部のみで表示エリアを超えた場合スクロールバーを
表示する、というHTMLを実現するにはどうすればよいでしょうか。
（ウィンドウサイズに応じてコンテンツ部は変動するが、ヘッダとフッタは常に固定）

イメージとしては以下の構成になります。いろいろ調べてみたのですが、ヘッダとフッタは固定
できてもスクロールバーがウィンドウ全体に表示されてしまうものばかりでした。

--------------------------------
ヘッダ（固定）
（スクロールバーなし）
--------------------------------
コンテンツ
（スクロールバーあり）

--------------------------------
フッタ（固定）
（スクロールバーなし）
--------------------------------

フレームは使用せず、CSSのみで実現する方法を教えて頂けませんでしょうか。
IE7、IE8で動作させたいと思っています。

宜しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： LOHA
回答日時：2012/05/12 01:54

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>

- 1
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2012/05/09 00:21

・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/visu … )」をお読みください。CSS2から変更されています。ちなみにCSS2( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )は訂正されました。

　きちんと、具体的な値(pxなど)で指定しなければなりません。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
　さすれば、sectionにスクロールバーを表示させることが出来ます。

　javascriptでウィンドウ高さを求め、その値を元にスタイルシートを書き換えれば出来なくはないですが、色々問題があってお勧めしません。

- 0
- 件

通報する

この回答へのお礼

返答ありがとうございます。

> javascriptでウィンドウ高さを求め、その値を元にスタイルシートを書き換えれば出来なくはないです
> が、色々問題があってお勧めしません。

おっしゃるとおり、ピクセル固定であればコンテンツ部のみにスクロールを表示させることはできますよね。CSSのみでできないとなれば、JavaScriptを使用して、ウィンドウサイズのイベントを拾って、動的にサイズを変更していくしかないか、と思っていたのですが、問題というのは何でしょうか。
何か問題があるという認識がありませんでした。教えて頂けないでしょうか。

宜しくお願いします。

通報する

お礼日時：2012/05/11 02:30

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！