dポイントプレゼントキャンペーン実施中！

［CSS］ヘッダー固定＋コンテンツの縦位置可変

解決済

  • 質問者：mtmaster
  • 質問日時：
  • 回答数：2件

CSSでのヘッダー固定に関する質問です。

ヘッダーを固定表示しつつ、ヘッダーの縦幅が文字サイズの可変などで大小した時に
それにあわせてその下部の固定じゃないコンテンツ部分の縦の位置が
調整されるようにCSSで組むことは可能でしょうか？

ヘッダー固定関連を調べてみたのですが、
条件に合うものがうまく見つけられなかったので、
恐れ入りますが質問させていただきました。

添付画像のような処理を行いたいと思っています。

●文字サイズ可変に対応できない例
#header{
position:fixed; (またはposition:absolute;)
width:100%;
height:100px;"
}
#content{
width:100%;
margin:100px 0 0;(またはpadding)
}

<body>
<div id="header" >******</div>
<div id="content">*****</div>
</body>

これだと#header内の文字サイズが大きくなった場合、枠からはみ出してしまいます。
現在はこれを用いています。（IE6対応などは行っています）

●文字サイズ可変に対応出来るが、固定部分に対応出来ない？

http://www.rr.iij4u.or.jp/~kazumix/d/css/sample/ …

こちらのやり方？

●やりたいこと

<body>
<div id="header">
　 <div id="header1">テキスト テキスト テキスト</div>
　 <div id="header2">画像や動画など縦幅は固定</div>
　 <div id="header3">テキスト テキスト テキスト</div>
</div>
<div id="content">******</div>
</body>

この形で、
header1とheader3はテキストが入るのでfirefox等の
ブラウザの文字サイズ変更にて縦幅が可変しますが、
header2は常に縦幅が固定(100pxなど)です。
この条件の#headerの高さに応じて、スクロールバーが一番上にある状態の時は
#content部分が常にピタッと#headerの下にひっついた状態にしたいです。
（スクロールバーは#content部分ではなく、body全体に出る形）

この条件で、CSSのみで、ヘッダー固定を実現することは可能でしょうか？
htmlの書き方は見た目が実現可能であれば必ずしも●やりたいこと
の部分のものと同じでなくてもかまいません。
js等必要でしょうか？

ご存知の方、ご教授いただけますと幸いでございます。

「［CSS］ヘッダー固定＋コンテンツの縦位」の質問画像
通報する

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

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： SAYKA
  • 回答日時：

ものすごい手を抜くならコンテンツ側をiframe



height固定を外すだけじゃだめなのかな
どちらにしても、再描画後にjsなりで他のコンテンツの位置をずらすとかの処置が必要かも
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答いただきましてありがとうございます。

iframeやoverflowならなんとかなりますね。

妥協出来るところは妥協しなきゃいけないですね・・・
そうなるとやはりjsを使う必要がありそうですか。
その方向で一度考えてみようと思います。

諸所問題はありますし今は使おうと考えておりませんが、
かつて流行ったフレームはなんだかんだで便利ではありましたね。

通報する
お礼日時：2011/09/07 09:43

No.2

  • 回答者： ORUKA1951
  • 回答日時：

デザインを考えて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をつける)すると、継承や詳細度がうまく使えなくなる。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答いただきましてありがとうございます。

会員用マイページのデザインなので、検索エンジンは逆に来ないようにしておりますので、
なんとかこの形で実現出来ればと考えています。
（デザインは社内で確定済みですので変更が不可能です）

上記コーディングですと、ヘッダー固定（画面をスクロールしても常に上部に表示：PC版ツイッターの最上段の黒いバー部分みたいなもの）にならないかと思います。

CSSだけでも強引な方法を使えば出来ないこともないのですが、
何かスマートな方法があればと思っています。

通報する
お礼日時：2011/09/07 09:39

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報