プロが教える店舗＆オフィスのセキュリティ対策術

css 標準モードでheight:100%にしたとき、フッターを画面の一番下にもってくるには？

解決済

  • 質問者：armstrong-us
  • 質問日時：
  • 回答数：3件

お世話になります。
タイトル通り、標準モードでheight:100%のものをつくり、一番下にフッターがくるようにしたいのですが、どうにも出来ません。
なにかいい方法がないか、ご教授いただけると幸いです。

尚、テーブルは使わない方法でお願いします。
以下が途中までのソースです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<style type="text/css">
<!--
html,body {
margin:0px;
padding:0px;
height:100%;
}
div#h100 {
height:100%;
background-color:#eeeeee;
}
div#header {
background-color:black;
color:white;
}
div#container {
background-color:#ffffee;
}
div#footer {
background-color:black;
color:white;
}
-->
</style>
</head>
<body>
<div id="h100">
<div id="header">ヘッダー</div>
<div id="container">コンテンツ</div>
<div id="footer">フッター</div>
</div>
</body>
</html>

通報する

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

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： goldfox
  • 回答日時：

これでいいかと。


<style type="text/css">
<!--
html,body {
margin:0px;
padding:0px;
height:100%;
}
div#h100 {
position:relative; top:0; left:0 ;
height:100%;
background-color:#eeeeee;
}
div#header {
background-color:black;
color:white;
}
div#container {
background-color:#ffffee;
}
div#footer {
position:absolute; bottom:0px; left:0px ;width:100%;
background-color:black;
color:white;
}
-->
</style>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
なるほど、position:absoluteですか。
気がつきませんでした。

通報する
お礼日時：2006/04/30 00:40

No.2

bottom:0px;



これ？

NC6.0以上、IE5.5以上か、IE6以上だったと思います。

この回答への補足

ご回答ありがとうございます。
これ？というのは、どういうことでしょうか？
bottom:0px;
っていうだけの表記はないと思うんですけど。

補足日時：2006/04/29 22:59
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： partita
  • 回答日時：

標準モードにおいて「height:100%」は、画面高さの100%という意味ではありません。


widthに対する割合が100％という意味です。

よって、footerを画面最下部に配置するには、javascriptなどを使用するくらいかな？
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報