フッターが言うことを聞かない

「フッター」に書かれた文字を中心に持ってきて、かつフッターを画面に一番下に持ってこようととしているのですが、いろいろ調べても、どんなコードを試しても

・フッターを一番下に持ってくること
・フッターに記述された文字を真ん中にもってくること

両立をさせることができません。

例えば、こちらのサイトを参考にしてフッターを一番下に持ってこようとしてもどういうわけか画面の真ん中あたりにフッターが来てしまいます。

https://breaktimes.hatenablog.com/entry/2015/04/03/194352

解決策をご存じの方いらっしゃいましたら、ご教授いただけたら幸いです。どうぞよろしくお願いいたします。

html
1<html>
2	<head>
3		<meta charset="UTF-8">
4			<title>xxxxx(※1)-ログイン管理</title>
5			<link rel="stylesheet" href="header.css">
6	</head>
7
8<div class="container">
9	<header>
10
11<div class="header">
12
13<div class="header_logo_font">
14<p>書籍管理システムログイン</p>
15</div>
16</div>
17
18<hr>
19</header>
20	<body>
21		<div class="body">
22		<div class="content">
23          <div align="left">
24              <table border="0">
25                  <form action="list.html" method="get">
26                     <p>ユーザID<br>
27                     <input type="text" name="user_id" value="" size="24">
28
29                     <p>パスワード<br>
30					<input type="password" name="password" value="" size="24">
31					<br>
32                     <input type="submit" value="ログイン">
33
34                  </form>
35              </table>
36
37	</div>
38	</div>
39
40<footer>
41<hr>
42<div align="center">
43<p>フッター</p>
44</div>
45</footer>
46
47</body>
48</div>
49</html>

css
1@charset "UTF-8";
2
3.header_logo_font{
4	color:white;
5}
6
7.header{
8	float:left;
9
10
11  height:100px;
12  width:100%;
13  background-color:rgba(34, 49, 52, 0.9);
14  padding:10px;
15
16}
17.header_logo{
18	float:left
19}
20
21.header_logo{
22	float:left
23}
24
25.container { position: relative; width: 100%; height: auto !important; height: 100%; min-height: 100%; }

下記のようなコードにすると、フッターは確かに一番下に来てくれるのですがフッターに書いた文字が中央に来てくれません。

HTML
1<html>
2	<head>
3		<meta charset="UTF-8">
4			<title>xxxxx(※1)-ログイン管理</title>
5			<link rel="stylesheet" href="header.css">
6	</head>
7
8<div class="container">
9	<header>
10
11<div class="header">
12
13<div class="header_logo">
14<img src="ITマーク+ロゴタイプ（カラー）_72dpi.jpg" width="50%" height="50%"  >
15</div>
16<div class="header_logo_font">
17<p>書籍管理システムログイン</p>
18</div>
19</div>
20
21<hr>
22</header>
23	<body>
24		<div class="body">
25		<div class="content">
26          <div align="left">
27              <table border="0">
28                  <form action="list.html" method="get">
29                     <p>ユーザID<br>
30                     <input type="text" name="user_id" value="" size="24">
31
32                     <p>パスワード<br>
33					<input type="password" name="password" value="" size="24">
34					<br>
35                     <input type="submit" value="ログイン">
36
37                  </form>
38              </table>
39
40	</div>
41	</div>
42
43<footer>
44<hr>
45<div align="center">
46<p>フッター</p>
47</div>
48</footer>
49
50</body>
51</div>
52</html>

CSS
1@charset "UTF-8";
2
3.header_logo_font{
4	color:white;
5}
6
7.header{
8	float:left;
9
10
11  height:100px;
12  width:100%;
13  background-color:rgba(34, 49, 52, 0.9);
14  padding:10px;
15
16}
17.header_logo{
18	float:left
19}
20
21
22
23html {
24  min-height: 100%;
25  position: relative;
26}
27
28body {
29  margin-bottom: 5em;
30}
31
32footer {
33  bottom: 0;
34  height: 5em;
35  position: absolute;
36}

ah6BD2gZo5GnjnT

2020/06/12 11:28

css footer{ width: 100%; position: absolute; bottom: 0; } これを設定すれば問題ないと思います。＊素人なので完全に正しいとは断言出来ないですが

ypk

2020/06/12 11:31

お疲れ様です。試してみたところ、無事に固定することができました。ありがとうございました。

kei344

2020/06/12 12:21

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。

ypk

2020/06/12 12:38

分かっていますよ、どういうわけか自己解決ボタンを押すとteratailのサーバーがダウンしてしまい自己解決にすることができていなかっただけです。今対応しました。ご指摘ありがとうございました。

行動規範の内容に同意します

回答2件

解決した質問にアレですがbodyとか閉じタグがそもそもおかしいような。

html
1<html>
2  <head>
3  </head>
4  <body>
5  </body>
6</html>

この構造は崩せないんじゃなかったっけ？自分の認識が古いのかな？
インデントはしっかりつけるのをおすすめ。自動整形ツールとかもあるし。

投稿2020/06/12 13:10

sousuke

総合スコア3828

ypk

2020/06/12 13:52

ありがとうございます????‍♂️????‍♂️ そうですね、おっしゃる通りだと思います、気をつけます????‍♂️

行動規範の内容に同意します

ベストアンサー

css
footer{
width: 100%;
position: absolute;
bottom: 0;
}
これを設定すれば問題ないと思います。
＊素人なので完全に正しいとは断言出来ないですが

投稿2020/06/12 12:26

ah6BD2gZo5GnjnT

総合スコア46

ypk

2020/06/12 12:38

ありがとうございます。無事に実行できました。今後ともよろしくお願いいたします。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

フッターが言うことを聞かない

関連した質問