CSS position:fixedでヘッダとフッタを固定したい
- CSS position:fixedを使用してヘッダとフッタを固定したいが、IEとFirefoxで固定が無視される問題が発生している。解決策を教えてください。
- テキストエディタでHTMLとCSSを使用してヘッダとフッタを固定したいが、position:fixedを適用しても上手く固定されず、位置が崩れる問題が発生している。解決策を教えてください。
- CSSのposition:fixedを使ってヘッダとフッタを固定したいが、IEやFirefoxでは固定が無視されてしまう。ヘッダが下がったり、位置が崩れてしまう問題に悩んでいる。解決策を教えてください。
- ベストアンサー
css position:fixed でヘッダとフッタを固定したい
画像のようなページを作りたいと思っています。 使用するのはテキストエディタで、htmlとcssのみです。 cssで、 #header{ background-color: #cc99ff; position:fixed; top : 0; left : 0; width:100%; height:55px; z-index:3; } #inner {background-color: #cc9900; margin: 0em 3em 3em 3em; padding: 1em; width:90%; height:90%; z-index:1; border-top:solid 2px #004427; border-bottom:solid 2px #004427;} のように書いても、IE、firefoxともに固定が無視されます。 これ以外にも、少々書き方を変えたり色々してみたのですが、固定はされても位置が崩れる（ほとんどが、ヘッダが下がって来ます。）等、上手く行きません。 原因も分からず、解決策が見つかりません。 良い方法等、お教え下さい。 よろしくお願い致します。
- toatouto
- お礼率83% (492/588)
- HTML
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
細かい話は抜きにして…、完成予想図はこんな感じでしょうか？ --- <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 の影響を受けるんですね。
その他の回答 (1)
- think49
- ベストアンサー率59% (285/482)
> ちなみに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%; にしてしまうと、ウインドウの大きさが小さいときにヘッダがコンテンツ幅分の高さを取得できない可能性があります。
お礼
再度、ありがとうございます。 お蔭様で、何とかなりそうです。 現状、 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
- ＣＳＳを消して表に色を付けたい！！！
参考サイトのソースをそのまま使って編集してたら、表を挿入して、色を付けようとしたら「ＣＳＳが設定されているため・・・」と出て表に色がつけられません。 <!-- BODY { MARGIN-TOP: 3px; COLOR: #000000; BACKGROUND-COLOR: #e6eee6; TEXT-ALIGN: center ;} TABLE { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; WIDTH: 900px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px ;} TD { FONT-SIZE: 11pt; MARGIN: 0px; WIDTH: 140px; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #48D1CC; TEXT-ALIGN: center ;} DIV { BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; BORDER-LEFT: #999999 1px solid; WIDTH: 900px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: #ffffff ;} .menu { BORDER-RIGHT: #66cc99 0px solid; PADDING-RIGHT: 3px; BORDER-TOP: #66cc99 0px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #66cc99 0px solid; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 3px; BORDER-BOTTOM: #66cc99 0px solid; BACKGROUND-COLOR: #1E90FF; TEXT-DECORATION: none ;} .menu:hover { COLOR: #004411; BACKGROUND-COLOR: #FFF8DC ;} .close { BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 11pt; BORDER-LEFT: #ff0000 1px solid; COLOR: #dd0000; BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none ;} .close:hover { COLOR: #ffffff; BACKGROUND-COLOR: #ff0000 ;} --> １．ＣＳＳを全て解除しなければいけないのですか？ ２．メニューにカーソルをあてたら色が変わるようにしています。表に色をつけるようにするには、どこを削除すればいいのですか？
- 締切済み
- HTML
- スタイルシートのpositionでフッターを位置指定するには
こんにちは。今回ページレイアウトにテーブルではなくcssのpositionを使おうと思っているのですが、フッターの指定がうまくいきません。フッターの上のメインコンテンツや右カラム、左カラムが短い場合は問題ないのですが、長くなるとフッターにかかってしまいます。左カラム、メインコンテンツ、右カラムのどれが長くなっても常にフッターがページの最下部に下がるようにするにはどのように指定すればいいですか？ちなみに今こんな感じで指定しています。 フッターをbottom:0px;で指定すれば常に一番下に来ると思ったのですが…。スクロールしない範囲での一番下にしか来ません…。 /* 左カラム */ #left_column { position: absolute; top: 130px; left: 10px; background-color: #FFFFFF; width: 150px; /* height: 500px; */ border: 1px solid #000; padding: 0px; } /* メインコンテンツ */ #main_contents { position: absolute; top: 130px; left: 165px; background-color: #FFFFCC; width: 490px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* 右カラム */ #right_column { position: absolute; top: 130px; left: 660px; background-color: #FFFFFF; width: 200px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* フッター */ #footer { position: absolute; bottom: 0px; left: 10px; background-color: #EEE; width: 850px; border: 1px solid #000; padding: 20px; }
- 締切済み
- その他([技術者向] コンピューター)
- position:fixed;でメニューを右側に固定したい
position:fixed;でメニューを右側に固定したい こちらを参考にサイドバーが固定された2カラムのサイトを作っています。 http://www.css-lecture.com/log/css/049.html 上記のサイトを見てくだされば分かると思うのですが、サイトバーはすべてを囲うwrapperボックスの左端に固定されています。 これをwrapperボックスの右端に持って行きたいのですが、うまくいきません。 position:fixed;にrightやleftを指定すると、wrapperボックスではなくブラウザの端に寄ってしまいます。 absolutoではスクロールされてしまいますし……。 自分なりに調べていろいろと試してみたのですが、解決することはできませんでした。 javascriptや疑似フレームは出来るだけ使いたくありません。 右端に持って行くことは可能なのでしょうか？現状では無理なのでしょうか？ HTML <div id="wrapper"> <div id="menu"></div> <div id="main"></div> </div> CSS #wrapper{ width:700px; margin:0 auto; background-color:#FFF; position:relative; } div#menu { width: 100px; background: #CCC; padding:10px; height:100%; position:fixed; top: 0px; z-index: 20; } * html div#subContents { position: absolute; top: expression(eval(document.documentElement.scrollTop+0)); } #main{ margin-left:120px; padding:10px; width:560px; position:relative; background-color:#FFF; } よろしくお願いします。
- ベストアンサー
- HTML
- CSSで枠線の太さを変えるとき
CSSでlistタグを使ってナビゲーションを作る練習をしています。 CSSで以下のように書いた場合、a:hover時の動作として、上の枠線のみが１pxから5pxに変わります。しかし、この方法だと、【上の枠線の下】が5pxとなり、その分、入力してある文字が下にずれます。 そこで、ずれないように、【上の枠線の上】に5px増やすにはどうすればいいでしょうか。 あるいは、そのように見せるための方法がありますか。画像は使用しないで作りたいです。 よろしくお願いします（CSSは初心者程度のレベルです）。 ================================================== ul{ list-style-type:none; } a{ text-decoration:none; } li a{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } li a:hover{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:5px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } ==================================================
- ベストアンサー
- CSS
- CSS dtの中に画像を入れた時に
CSS dtの中に画像を入れた時に dtの文字が下にずれてしまいます。 画像を消すと問題無いので、画像の指定に原因があると思うのですが・・・。 ■css ---------------------------------------- .sub{ clear:both; width:420px; } .sub dt{ float:left; padding:0 0 0 0; width:200px; height:38px; line-height:38px; background:url(../img/sub-bg2.jpg) no-repeat; font-size:1em; border-top:1px solid #f4e9bf; border-bottom:1px solid #f4e9bf; } .sub dt img{ padding:0 0 0 0; width:4px; height:38px; } .sub-menu dd{ float:right; width:180px; height:38px; line-height:38px; font-size:1em; background-color:#ffffcc; text-align:right; border-top:1px solid #f4e9bf; border-bottom:1px solid #f4e9bf; } ■html --------------------------------------- <dl class="sub"> <dt><img src="../img/a.png" width="4" height="38" alt="aa" />テキスト</dt> <dd>あいうえお</dd> </dl> お分かりになる方、宜しくお願いします。
- ベストアンサー
- HTML
- CSSが反映されなくて困っています。
iframeを使ってhtmlファイルのdiv要素を表示しようとしていますが表示すると iframeの左端に意図しないスペースができてしまい困っています。 "IEの要素を検証"でデバッグしながら検証しているのですが、 レイアウトを見るとOffsetが60となっています。 "IEの要素を検証"を使いdiv要素のスタイルを指定しているwidthを変更すると IE上でスペースが小さくなっていくのが確認できるので、 その通りにCSSファイルの中身を書き換えるのですが、 何故か反映されず困っています。 ブラウザのキャッシュはクリアしています。 div要素のクラス以外で考えてみる必要のある項目が有るのかとも思うのですが、 何かアドバイス頂けませんでしょうか？ 下記ソースです。 HTML（覗く側）-------------------------------------------------------------------- <IFRAME src="xxx/index.html" name="Topページメイン画像" width="900px" height="550px" frameborder="0" scrolling="no"> ブラウザがインラインフレームに対応していません。 表示される文章はこちらです。 </IFRAME> HTML(index.html)覗かれる側---------------------------------------------------------- <div class="fallback-message"> <img src="top2.jpg" width="900px"></img> </div> ---------------------------------------------------------------------------------- CSS------------------------------------------------------------------------------ .fallback-message { width: 818px; line-height: 0; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; font-family: sans-serif; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; border-top-color: #e4c652; border-right-color: #e4c652; border-bottom-color: #e4c652; border-left-color: #e4c652; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; background-image: none; background-attachment: scroll; background-repeat: repeat; background-position-x: 0%; background-position-y: 0%; background-color: rgb(238, 220, 148); } ---------------------------------------------------------------------------------- 何卒お願いいたします。
- 締切済み
- CSS
- Opera、ネスケでcssが崩れます
DreamWeaverMXで作業しています。 ブラウザはLunascape（Netscapeから生まれたもの？）とIE6を使用、確認していましたが、 アップ後にOpera9、Netscape、Mozila Firefox1.5で確認したところ CSSが崩れていることに気づきました。 左右のフロートが崩れており、この回避方法を調べましたが よくわかりません。。。。 過去の教えて！から、下記URLを参考にしましたが それでも理解できません。涙 http://members.at.infoseek.co.jp/cssbug/detail/opera.html http://www.keynavi.net/ja/bugh/index.html どなたか制作に詳しい方、助けてください…！ ---------------------------------------- <link rel="stylesheet" href="web.css" type="text/css" media="screen"> --------------- #body{ margin:auto; width: 700px; padding-top: 0px; } #page{ background:#ffffff 700px; width:700px; font-size:11px; color:#585858; border-right: 1px solid #585858; border-bottom: 1px solid #585858; border-left: 1px solid #CCCCCC; border-top-width: 1px; border-top-style: solid; border-top-color: #CCCCCC; } #left{ width:180px; float:left; text-align:left; padding-top: 5px; padding-right: 5px; padding-left: 5px; background-color: #797979; height: 100%; padding-bottom: 10px; margin-left: 1px; border-top-width: 10px; border-top-style: solid; border-top-color: #FFFFFF; } } #right{ width:480px; text-align:left; float: right; margin-right: 3px; padding: 15px; margin-top: 8px; } --------------------------------
- ベストアンサー
- HTML
- ＣＳＳのフッター部分について
ＣＳＳ初心者です 今回外部ＣＳＳで作成したのですが途中まではうまくいきました しかし最後のフッターを入れるとレイアウトが崩れるのです。 今回の形状はページに上から「ページ(ホームページタイトル)」「ヘッダー(サブタイトル)」「同域上に左右に分けて「submanu」「main」」として最後にfootで「コピーライトなどを書いて」閉めたいのです 作ったCSSは以下の通り(どこが悪いのでしょう(foot入れるまで理想に近づいていたのですが)) *{ margin: 0px; padding: 0px; } div#page { text-align: left; border: 1px solid #333333; background: #66FFFF; width: 720px; margin: 0px; } div#head { width: 720px; padding: 5px 5px 0px 0px; margin: 0px; background: #FF00FF; } div#main { margin: 0px; border-left: 1px solid #FF; padding: 20px 0px; background: #00CCFF; width: 560px; height: 5000px; float: left; } div#submenu { width: 160px; height: 5000px; margin: 0px; padding: 20px 0px; float: left; background: #00FF33; } div#foot{ clear:both; text-align:center; font-size:10px; background:#FFFFFF; width:720px; height:20px; }
- 締切済み
- CSS
- Liで背景画像が表示されない （Safari、Operaにて）
こんにちは。 同じような質問が続いていますが、違うものでございます。 以下のようなcssを組んだのですが、なぜかSafari、Operaでは文頭の画像が表示されません。 （ちなみに画像は幅4px、高さ5px） なぜかお分かりになる方がいらしたら、教えていただければと思います。 #box { width: 160px; color: #333333; background-color:#ffffff; border-right:1px solid #333333; border-top:2px solid #CC0033; } #box ul { list-style:none; margin:0 0 2px 0; padding:0 0 0 1.2em; line-height:1.7; } #box ul li { margin:0px; padding:0 0 0 0.8em; font-size:75%; color: #CC0033; background-color: #FFFFFF; background: 0 url(../images/pt-sub.gif) no-repeat 0.5em; border-bottom:1px dotted #aaaaaa; list-style:none; }
- ベストアンサー
- HTML
- Cssで
次のようなHTMLとCssを作成し、見出しを表示しようとしています。 1つ目の見出しと2つ目の見出しは全く違うものにしたいので、2つ目の見出しにはh2にクラス名を指定しています。 しかし2つ目の見出しは1つ目の見出しの属性を引き継いでいるようで、 border-left: 5px solid #0086b9;などは有効になり2つ目の見出しでも左側に線が表示されてしまいます。 1つ目のcssの情報を完全に消した後、2つ目の見出しを表示する方法をご教授下さい。 ▼HTML <h2>見出し２</h2> <h2 class="sample1">見出し２</h2> ■Css h2 { font-size: 145%; margin-top: 10px; margin-bottom: 10px; padding-left: 10px; border-left: 5px solid #0086b9; border-right: 1px solid #0086b9; border-top: 1px solid #0086b9; border-bottom: 1px solid #0086b9; line-height: 1.4; background-color:#F7F7EF; } h2.sample1{ border-right:solid 2px #808080; border-bottom:solid 2px #808080; background-color:#c0c0c0; padding-top:3px;padding-left:3px; width:300px; }
- 締切済み
- HTML
補足
ありがとうございます!! 頂いたソースをそのまま置き換えてみたところ、イメージからは遠くなかったので、具合の悪いところだけを少々いじりました。 現状、↓のようになっています。 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指定にしているのですが、これは解消出来るでしょうか？ ご面倒かとは存じますが、よろしければ再度教えて下さい。 どうぞよろしくお願い致します。