お世話になります。
タイトル通り、標準モードで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>
No.3ベストアンサー
- 回答日時:
これでいいかと。
<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>
No.2
- 回答日時:
bottom:0px;
これ?
NC6.0以上、IE5.5以上か、IE6以上だったと思います。
この回答への補足
ご回答ありがとうございます。
これ?というのは、どういうことでしょうか?
bottom:0px;
っていうだけの表記はないと思うんですけど。
No.1
- 回答日時:
標準モードにおいて「height:100%」は、画面高さの100%という意味ではありません。
widthに対する割合が100%という意味です。
よって、footerを画面最下部に配置するには、javascriptなどを使用するくらいかな?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
フッター上部に謎の隙間
-
大分類・中分類・小分類
-
HTMLですCSSです 画像のように...
-
CSS <div>の入れ子が反映さ...
-
チェックボックスの背景色って...
-
Ctrl+F(検索)の窓を出したいの...
-
htmlのstyleのposition:relativ...
-
textareaで入力した文字を改行...
-
文字をクリックしたら別の文字...
-
TABLEの高さを固定したいのですが…
-
SafariでもBGMを流す方法という...
-
youtubeをHPに載せたいです。
-
[CSS] 常にフッターは下部に表...
-
3点リーダーの作り方
-
Flickity で画像にリンクを貼る...
-
HTMLですCSSです この画像のよ...
-
MAX関数を使ってからLEFT JOIN...
-
javascriptで毎月替わる画像
-
Slick.jsのオプションrtlについて
-
jQueryで、リンクURLの一致を確...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSS <div>の入れ子が反映さ...
-
フッター上部に謎の隙間
-
Ctrl+F(検索)の窓を出したいの...
-
【CSS】floatで左右に並べた...
-
css固定したフッターが本文と重...
-
HTMLですCSSです 画像のように...
-
htmlのstyleのposition:relativ...
-
HTMLですCSSです この画像のよ...
-
Flickity で画像にリンクを貼る...
-
画像の特定の座標にカーソルが...
-
チェックボックスの背景色って...
-
html スクロール要素を下から表...
-
レイアウトが崩れないようにす...
-
スクロール可能なチェックボックス
-
リンクで違うページの指定箇所...
-
オンマウス時に別画像を上に重...
-
フッターの下に隙間ができてしまう
-
スタイルシート(CSS)で、高さ...
-
かなり困っています。知恵を貸...
-
離れた場所にマウスオーバーで...
おすすめ情報