ここから本文です

footer(フッター)が一番下に固定できない、html,body要素が100%にならない C...

mok********さん

2012/10/3117:14:38

footer(フッター)が一番下に固定できない、html,body要素が100%にならない CSS

ご質問させていただきます。

footer(フッター)が一番下に固定できない、html,body要素が100%にならない状態に陥っています。
タグは下記のとおりです

<html>
<head>
<body>
<div id="wrap">
<header></header>
<nav id="navi"></navi>
<article></article>
<section id="main"></section>
<footer></footer>
</div>
</body>
</html>

CSSは下記の通り

html,body{
height: 2500px;
}

body {
background: url("・・・・・") repeat-x scroll left top transparent;
color: #333333;
display: block;
font-family: "・・・",sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}

#wrapper{
width:980px;
margin: 0 auto;
position: relative;
height: auto !important;
height: 100%;
min-height: 100%;
}
article {
float: left;
width: 300px;
padding-bottom: 50px;
margin-top:90px;
overflow: hidden;
}

section {
float: right;
width: 680px;
margin-top:90px;
overflow: hidden;
}
footer {
background:#ffffff;
width: 980px;
position: absolute;
bottom: 0;
clear: both;
}


いろいろなサイトを参考に試してみたのですがどうもうまくいきません。
原因はhtml,bodyのheight100%が効いていないようです。
仮に2500pxなど指定すると一番下に固定して表示されます。

原因としてhtml,bodyへの100%指定が効いていない理由がわかりません。
この場合どのようにすれば一番下にフッターを固定できるかお知恵をお貸しくださいませ。

※文字数のためHTMLのタグは内容を取り除いています。
よろしくお願いいたします。

この質問は、活躍中のチエリアン・専門家に回答をリクエストしました。

閲覧数:
4,655
回答数:
1
お礼:
500枚

違反報告

ベストアンサーに選ばれた回答

jav********さん

2012/11/103:52:40

まず、htmlのdiv要素のidはwrapですが、cssはwrapperになっているようですが…

html,bodyへのheight100%指定はちゃんと効いています。

原因は、wrapにもheight100%が指定されている & wrap内のfooter要素が、positionでwrap内の下から0pxに表示される指定をしているので、ブラウザのウインドウ表示領域内にwrap内のコンテンツが収まらなかった時に、footer要素がウインドウ表示領域内に上がってくるためだと思います。

なので、フッターを、positionで一番下に固定するときには、コンテンツの量(高さ)に注意が必要です。
そもそも、ウインドウをリサイズされた場合は回避策がないと思います。>_<

おすすめのフッター固定方法は、positionを使わずに、footerにネガティブマージンを取る方法です。
よければ参考にしてください。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
html,body {
height: 100%;
border: 10px solid red;
}

body {
border: 10px solid blue;
}

header,footer { border: 10px solid green; }

nav,article,section {border: 10px solid yellow;}

#wrap{
width: 980px;
margin: 0 auto;
min-height: 100%;
_height: 100%;/* IE6用ハック */
border: 10px solid black;
}

#content {
width: 960px;
margin: 0 auto;
border: 10px solid gray;
padding-bottom: 121px;/* ウィンドウをリサイズされた時にfooterとcontent部分が重ならないようにするためにfooterの高さ分以上の領域を確保 */
}

footer {
height: 100px;
margin-top: -120px;/* footerの高さ分のネガティブマージン */

}
</style>
</head>
<body>

<div id="wrap">

<header>header</header>

<div id="content">
<nav>nav</nav>
<article>article</article>
<section>section</section>
</div><!-- /content -->

</div><!-- /wrap -->

<footer>footer</footer>

</body>
</html>

質問した人からのコメント

2012/11/1 11:45:59

感謝 丁寧にご回答ありがとうございました。いろいろなサイト見過ぎて混ざってました、
ご回答のように<footer>を独立させてうまく表示することに成功しました。丁寧な回答者様と巡り合えてよかったです。ありがとうございました。

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる