footerを{position:absolute;bottom:0p

締切済

質問者：petta0619
質問日時：2010/09/09 20:59
回答数：2件

footerを{position:absolute;bottom:0px;}で固定しようとしたら、今度はブラウザのウィンドウの上下を縮めるとfooterが上部の要素を上に通り越してしまいます。
　　　　　　　　　　
これを正しく、footerが上部要素に届いたらfooterの移動がと止めるにはどうしたらよいでしょうか？

以下HTMLとCSSです。

<html>
・・・・中略
<body>
<div id="wrapper">
<div id="head">
・・・・中略(ナビゲーションなどあって）
</div>
<div id="mainContainer">
・・・・中略(3カラム等あって）
</div>mainContainerEND

<div id="footer">

</div>

</div>(wrapperの閉じ)

</body>
</html>

######css##########
html {
height:100%;
}

body {
height:100%;
}

div#wrapper {
width:800px;
height:100%;
margin:10px auto 0 auto;
border:#000000 solid 1px;
background:#FFFFFF;
}

div#header {
width:780px;
margin:10px auto 10px auto;
}

div#mainContainer {
width:780px;
height:auto;
margin:0 auto;
}

div#footer {
clear:both;
height:20px;
text-align:center;
width:800px;
background-image:url(footer_image.jpg) no-repeat left bottom;
position:absolute;
bottom:0;

######ココマデ

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： imaimasan
回答日時：2010/09/10 08:38

訂正

×↓
position:absolute;は直近のposition:relative;またはposition:absolute;を指定したものから

○↓
position:absolute;は直近のposition:relative;またはposition:absolute;を指定した親要素から

- 0
- 件

通報する

No.1

回答者： imaimasan
回答日時：2010/09/10 02:05

position:absolute;は直近のposition:relative;またはposition:absolute;を指定したものから他の要素の影響を受けることなくの絶対値で配置されます。

なので、それだけ一段浮いた感じで、bottom:0;の位置を死守しつづけますので、当然重なってしまいます。

なのでちょっとトリッキーな方法を使って重ならなくします。

下記のサンプルをコピペして試してみてください。

css-----------------------------------------------------

html, body{
height:100%;
margin:0;
padding:0;
}

div#wrapper {
position:relative;
width:800px;
height:auto !important;
height:100%;
min-height:100%;
/*
↑ここがミソ
ウィンドウを縮小してもmin-height:100%;でフッターを含まない要素全部の合計の高さでスクリーンサイズが止まります。
ただ、min-heightはIE６では効かないので、同じく効かない!important(順序関係なく最優先)を
指定して、IE6の場合は100%になるようにします。
なので、残念ながらIE6の場合は縮小すると重なってしまいます。
*/
margin:10px auto;
border:#000000 solid 1px;
background:#FFFFFF;
}

div#wrapper_in{
width:100%;
margin:0 auto;
padding-bottom:60px;
/*
↑このままではフッターの高さ分だけ重なってしまうので、
パディングボトムにフッターの高さ分を指定。
*/
}

div#header {
width:100%;
height:auto;
}

div#mainContainer {
width:100%;
height:auto;
margin:0 auto;
background:#999999;
}

div#footer {
position:absolute;
bottom:0;
clear:both;
height:60px;
width:100%;
background:#333333;
}

html--------------------------------------------------------

<body>
<div id="wrapper">
<div id="wrapper_in">
<div id="head">
・・・・中略(ナビゲーションなどあって）
</div>
<div id="mainContainer">
・・・・中略(3カラム等あって）<br />
内容<br />
内容<br />
内容<br />
内容<br />
内容<br />
内容<br />
内容<br />
内容<br />
内容<br />
内容<br />
内容<br />
内容<br />
内容<br />
内容<br />
内容<br />
内容<br />
</div>
<div id="footer">
</div>
</div>
</div>
</body>