teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

試したことを追加しました

2020/06/12 11:28

投稿

ypk
ypk

スコア83

title CHANGED
File without changes
body CHANGED
@@ -9,6 +9,8 @@
9
9
 
10
10
  https://breaktimes.hatenablog.com/entry/2015/04/03/194352
11
11
 
12
+ ![イメージ説明](b1dc10eaf95064572740f5d0b8edf616.png)
13
+
12
14
  解決策をご存じの方いらっしゃいましたら、ご教授いただけたら幸いです。どうぞよろしくお願いいたします。
13
15
 
14
16
 
@@ -90,4 +92,100 @@
90
92
  }
91
93
 
92
94
  .container { position: relative; width: 100%; height: auto !important; height: 100%; min-height: 100%; }
95
+ ```
96
+
97
+ 下記のようなコードにすると、フッターは確かに一番下に来てくれるのですがフッターに書いた文字が中央に来てくれません。
98
+
99
+ ```HTML
100
+ <html>
101
+ <head>
102
+ <meta charset="UTF-8">
103
+ <title>xxxxx(※1)-ログイン管理</title>
104
+ <link rel="stylesheet" href="header.css">
105
+ </head>
106
+
107
+ <div class="container">
108
+ <header>
109
+
110
+ <div class="header">
111
+
112
+ <div class="header_logo">
113
+ <img src="ITマーク+ロゴタイプ(カラー)_72dpi.jpg" width="50%" height="50%" >
114
+ </div>
115
+ <div class="header_logo_font">
116
+ <p>書籍管理システムログイン</p>
117
+ </div>
118
+ </div>
119
+
120
+ <hr>
121
+ </header>
122
+ <body>
123
+ <div class="body">
124
+ <div class="content">
125
+ <div align="left">
126
+ <table border="0">
127
+ <form action="list.html" method="get">
128
+ <p>ユーザID<br>
129
+ <input type="text" name="user_id" value="" size="24">
130
+
131
+ <p>パスワード<br>
132
+ <input type="password" name="password" value="" size="24">
133
+ <br>
134
+ <input type="submit" value="ログイン">
135
+
136
+ </form>
137
+ </table>
138
+
139
+ </div>
140
+ </div>
141
+
142
+ <footer>
143
+ <hr>
144
+ <div align="center">
145
+ <p>フッター</p>
146
+ </div>
147
+ </footer>
148
+
149
+ </body>
150
+ </div>
151
+ </html>
152
+ ```
153
+
154
+ ```CSS
155
+ @charset "UTF-8";
156
+
157
+ .header_logo_font{
158
+ color:white;
159
+ }
160
+
161
+ .header{
162
+ float:left;
163
+
164
+
165
+ height:100px;
166
+ width:100%;
167
+ background-color:rgba(34, 49, 52, 0.9);
168
+ padding:10px;
169
+
170
+ }
171
+ .header_logo{
172
+ float:left
173
+ }
174
+
175
+
176
+
177
+ html {
178
+ min-height: 100%;
179
+ position: relative;
180
+ }
181
+
182
+ body {
183
+ margin-bottom: 5em;
184
+ }
185
+
186
+ footer {
187
+ bottom: 0;
188
+ height: 5em;
189
+ position: absolute;
190
+ }
93
191
  ```