![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
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]ヘッダー固定+コンテンツの縦位」の質問画像](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/2/1023296_5497d80f7d90d/M.jpg)
No.1ベストアンサー
- 回答日時:
ものすごい手を抜くならコンテンツ側をiframe
height固定を外すだけじゃだめなのかな
どちらにしても、再描画後にjsなりで他のコンテンツの位置をずらすとかの処置が必要かも
ご回答いただきましてありがとうございます。
iframeやoverflowならなんとかなりますね。
妥協出来るところは妥協しなきゃいけないですね・・・
そうなるとやはりjsを使う必要がありそうですか。
その方向で一度考えてみようと思います。
諸所問題はありますし今は使おうと考えておりませんが、
かつて流行ったフレームはなんだかんだで便利ではありましたね。
No.2
- 回答日時:
デザインを考えて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だけでも強引な方法を使えば出来ないこともないのですが、
何かスマートな方法があればと思っています。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
<div id="container">の使いか...
-
要素間、要素内に隙間が空く
-
min-heightとheightの違いについて
-
グリッドレイアウトで"auto-fit...
-
<div>テキスト</div>
-
HTML属性での「""」 「''」違い
-
divとpの使いわけ
-
上部と下部にx-repeat∞の背景画...
-
CSSのIDとclassの命名規則は?
-
リストで画像を右に表示したい
-
IE・NNの独自タグについて
-
オシャレな区切り線はありませ...
-
検索して出てくるHPのコメント...
-
CSSで「float: left;」の次にフ...
-
CSS 余白を作る方法
-
html の divとtable の役割
-
h1のテキストサイズよりh2の方...
-
htmlの見出しタグ(<h1>)の次...
-
スライド部分のリンクが貼れな...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
<div id="container">の使いか...
-
1時間30分を簡単に表したいで...
-
min-heightとheightの違いについて
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
div要素が重なってします
-
divを横に並べる方法
-
スペースを使わず文字位置を揃...
-
<!-- #BeginLibraryItemとは
-
HTMLのJIS規格について
-
スライド部分のリンクが貼れな...
-
セクションをdivで囲むと見出し...
-
要素間、要素内に隙間が空く
-
hタグの右横に画像を表示
-
inline-blockをネストすると表...
-
divとpの使いわけ
-
グリッドレイアウトで"auto-fit...
おすすめ情報