質問編集履歴
1
試したことを追加しました
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
|
+

|
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
|
```
|