Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
  • ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:css position:fixed でヘッダとフッタを固定したい)

CSS position:fixedでヘッダとフッタを固定したい

このQ&Aのポイント
  • CSS position:fixedを使用してヘッダとフッタを固定したいが、IEとFirefoxで固定が無視される問題が発生している。解決策を教えてください。
  • テキストエディタでHTMLとCSSを使用してヘッダとフッタを固定したいが、position:fixedを適用しても上手く固定されず、位置が崩れる問題が発生している。解決策を教えてください。
  • CSSのposition:fixedを使ってヘッダとフッタを固定したいが、IEやFirefoxでは固定が無視されてしまう。ヘッダが下がったり、位置が崩れてしまう問題に悩んでいる。解決策を教えてください。

質問者が選んだベストアンサー

  • ベストアンサー
  • think49
  • ベストアンサー率59% (285/482)
回答No.1

細かい話は抜きにして…、完成予想図はこんな感じでしょうか? --- <style type="text/css"> html,body{ margin: 0px; padding: 0px; position: relative; height: 100%; background-color: #ccc; } #header{ position: fixed; top: 0px; left: 0px; width: 100%; height: 3em; background-color: #fee; z-index: 1; } #inner { position: fixed; top: 0px; left: 5%; width: 90%; height: 100%; padding: 4em 1em; background-color: #efe; z-index: 0; } #footer{ position: fixed; bottom: 0px; left: 0px; width: 100%; height: 3em; background-color: #eef; z-index: 1; } </style> </head> <body> <div id="header">header</div> <div id="inner">inner</div> <div id="footer">footer</div> --- positon: fixed; と marginとの組み合わせにちょっと手間取りました。 一見、影響しなさそうに見えて margin の影響を受けるんですね。

toatouto
質問者

補足

ありがとうございます!! 頂いたソースをそのまま置き換えてみたところ、イメージからは遠くなかったので、具合の悪いところだけを少々いじりました。 現状、↓のようになっています。 html,body{ margin: 0px; padding: 0px; position: relative; height: 100%; background-color: #; color:#; a:linkcolor:#; a:hover color:#; a:visited color:#; } hr{color:#} #header{ position: fixed; top: 0px; left: 0px; width: 100%; height: 5%; padding:0.5em 0em 0em 0em; background-color: #; z-index: 1; } #inner { position: fixed; top: 0px; left: 5%; width: 90%; height: 66%; padding: 4em 1em; background-color: #; border-top:solid 2px #; border-bottom:solid 2px # ; z-index: 0; overflow:auto; } #footer{ position: fixed; bottom: 0px; left: 0px; width: 100%; height: 10%; padding: 0em 0em 0.5em 0em; background-color: #; z-index: 1; } この状態で、Firefoxですとほとんど問題が解消され、あとはinnnerのborder-topが反映されればなぁ、と言う感じになっています。(何故かbottomの方は反映されているのです。) ちなみにheight: 66%;でないと、ヘッダとフッタの裏にボックスが隠れるようです。ヘッダとフッタのheightをいじると、これも変わるようなのですが。しかしこれを減らしても、innerの下辺が上がって来る(つまりヘッダとの間にhtmlのbgcolorが見えている状態?)になるだけで、border-topは表示されませんでした。何だかよく分かりません……。 padding: 4em 1emについては、出来れば4emの方を小さくしたいのですが、これはいじるとどこか崩れるでしょうか?(まだ試していません。) また、IEだと少々innerの見え方が違うのですが、まずhrに色が付かず、下辺は途中で切れており、最大化したウィンドウでは、border-bottomが反映されず(topももちろん反映されていません。と言うか前面に出て来ないのだと思うのですが。)、記事がギリギリまで見えている状態ですが、ウィンドウを小さくした場合、記事まで途中で切れるようになります。Firefoxではこの現象はありません。これは、z-indexを逆転させたら解消されるような単純な問題なのでしょうか? また、調整は自宅のPCのみで行っておるため、モニタが変わると見え方が変わるかどうかは試していないのですが、どうもそうなりそうな気がしています。環境に合わせて表示させるのが%指定だと思ったのですが、これはいかがでしょうか? 最後に、これはどうしてもではないのですが、ヘッダ内のテキストを、<h1>等で指定したいのですが、htmlの方で見出しのタグを入れると、必ずヘッダ部がinnerの中に落っこちます。仕方がないので現在はfont指定にしているのですが、これは解消出来るでしょうか? ご面倒かとは存じますが、よろしければ再度教えて下さい。 どうぞよろしくお願い致します。

すると、全ての回答が全文表示されます。

その他の回答 (1)

  • think49
  • ベストアンサー率59% (285/482)
回答No.2

> ちなみにheight: 66%;でないと、ヘッダとフッタの裏にボックスが隠れるようです。 その通り。そこは意識しました。 #header{ height:3em; } にしてあります。 #inner のheight は「100% - 6em;」である必要がありますが、 CSSで減算は不可能なので、height: 100% とし、重なる部分は padding で寄せました。 > #header{ height: 5%; } このようにするのであれば、 #inner { position: fixed; top: 5%; /* ヘッダの高さだけ下に配置する */ left: 5%; } で重ならなくなります。 ただし、height: 5%; にしてしまうと、ウインドウの大きさが小さいときにヘッダがコンテンツ幅分の高さを取得できない可能性があります。

toatouto
質問者

お礼

再度、ありがとうございます。 お蔭様で、何とかなりそうです。 現状、 html,body{ margin: 0px; padding: 0px; position: relative; height: 100%; line-height:150%; background-color: #; color:#; } a:link{color:#;} a:visited{color:#;} a:hover{color:#;} hr{color:#} #header{ position: fixed; top: 0px; left: 0px; width: 100%; height: 8.7%; padding:0.5em 0em 0em 0em; background-color: #; z-index: 1; } #inner { position: fixed; top: 10%; left: 5%; width: 90%; height: 73%; padding: 1em 1em; background-color: #; z-index: 0; overflow:auto; } #footer{ position: fixed; bottom: 0px; left: 0px; width: 100%; height: 10%; padding: 0em 0em 0.5em 0em; background-color: #; z-index: 1; } と言う感じで、文法チェックも無事クリアし、どうにか運営出来そうです。 本当に助かりました。 ありがとうございました。

すると、全ての回答が全文表示されます。

関連するQ&A