- ベストアンサー
[CSS]ヘッダー固定+コンテンツの縦位置可変
- CSSでのヘッダー固定に関する質問です。ヘッダーを固定表示しつつ、ヘッダーの縦幅が文字サイズの可変などで大小した時にそれにあわせてその下部の固定じゃないコンテンツ部分の縦の位置が調整されるようにCSSで組むことは可能でしょうか？
- ヘッダー固定関連を調べてみたのですが、条件に合うものがうまく見つけられなかったので、恐れ入りますが質問させていただきました。
- ヘッダー固定に関して、ヘッダーの縦幅が可変な場合にその下部のコンテンツの縦の位置を調整する方法について質問しています。HTMLの書き方に制約はなく、CSSのみで実現する方法を知りたいとのことです。また、JavaScriptの使用も可能かどうかについても質問しています。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ものすごい手を抜くならコンテンツ側をiframe height固定を外すだけじゃだめなのかな どちらにしても、再描画後にjsなりで他のコンテンツの位置をずらすとかの処置が必要かも
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
デザインを考えてHTMLを作成したらダメ。HTMLは文書構造をマークアップするものですから、それさえきちんと出来ていたら、サンプル画像の赤地部分を右上にfix、緑部分は中央とか、気が向いたとき自由に変更できるし、検索エンジンにも効果的。 <body> <div class="header"> <h1>見出し</h1> <h2><span>見出し2</span></h2> <div class="abstract">要約の記事</div> </div> <div class="section"> <h2>本文見出し</h2> </div> <div class="footer"> </div> </body> 位でよいですね。 CSSはたとえば div{margin:0;} div.header *{margin:0;background-color:blue;} div.header h2{height:100px;background-color:red;} div.header div.abstruct{padding:1ex 1em;background-color:olive;} div.section{min-height:400px;background-color:green;} div.footer{background-color:magenta;} 程度でよい、absoluteもfixedもいらないはず。 ポイント1:HTMLを作成するときデザインは考えない。HTMLは文書構造をマークアップするメタ言語 ポイント2:CSSは、それを自由にプレゼンテーションするもの、配置しようとしてもうまく出来ないときはマークアップがきちんと出来ていない。 ★横幅いっぱいのものをfixedしてしまうと、ページ内アンカーにリンクしたとき隠れてしまう。fixedすべきじゃないものをfixedしている。fixedは文章内の画像周辺に文字を回りこませるためのプロパティで、配置には特殊なとき以外使わない。 ★デザインのためにマークアップ(たとえば、無駄なidをつける)すると、継承や詳細度がうまく使えなくなる。
お礼
ご回答いただきましてありがとうございます。 会員用マイページのデザインなので、検索エンジンは逆に来ないようにしておりますので、 なんとかこの形で実現出来ればと考えています。 （デザインは社内で確定済みですので変更が不可能です） 上記コーディングですと、ヘッダー固定（画面をスクロールしても常に上部に表示：PC版ツイッターの最上段の黒いバー部分みたいなもの）にならないかと思います。 CSSだけでも強引な方法を使えば出来ないこともないのですが、 何かスマートな方法があればと思っています。
お礼
ご回答いただきましてありがとうございます。 iframeやoverflowならなんとかなりますね。 妥協出来るところは妥協しなきゃいけないですね・・・ そうなるとやはりjsを使う必要がありそうですか。 その方向で一度考えてみようと思います。 諸所問題はありますし今は使おうと考えておりませんが、 かつて流行ったフレームはなんだかんだで便利ではありましたね。