画像のようなページを作りたいと思っています。
使用するのはテキストエディタで、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ともに固定が無視されます。
これ以外にも、少々書き方を変えたり色々してみたのですが、固定はされても位置が崩れる（ほとんどが、ヘッダが下がって来ます。）等、上手く行きません。
原因も分からず、解決策が見つかりません。
良い方法等、お教え下さい。
よろしくお願い致します。
投稿日時 - 2009-10-22 12:33:58
細かい話は抜きにして…、完成予想図はこんな感じでしょうか？
---
<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 の影響を受けるんですね。
投稿日時 - 2009-10-23 00:41:19
補足
ありがとうございます!!
頂いたソースをそのまま置き換えてみたところ、イメージからは遠くなかったので、具合の悪いところだけを少々いじりました。
現状、↓のようになっています。
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指定にしているのですが、これは解消出来るでしょうか？
ご面倒かとは存じますが、よろしければ再度教えて下さい。
どうぞよろしくお願い致します。
投稿日時 - 2009-10-23 11:19:36
2人が「このQ&Aが役に立った」と投票しています
ベストアンサー以外の回答（1件中 1～1件目)
> ちなみに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%; にしてしまうと、ウインドウの大きさが小さいときにヘッダがコンテンツ幅分の高さを取得できない可能性があります。
投稿日時 - 2009-10-23 18:18:48
お礼
再度、ありがとうございます。
お蔭様で、何とかなりそうです。
現状、
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;
}
と言う感じで、文法チェックも無事クリアし、どうにか運営出来そうです。
本当に助かりました。
ありがとうございました。
投稿日時 - 2009-10-25 13:01:43
