下部のセクションを作りたいが、変な事になっていて、その原因がわかりません。

ウェブのページにfooter があるのですが、そのセクションがいまいちうまく下になっていないのですが、原因がわかりません。
最初のHTLMはOur Philosophy pageです

HTML
1<!-- Assignment 18 % COMP112 Tomofumi Kimura index page-->
2<!DOCTYPE html>
3<html lang="en">
4	<head>
5	<!-- kimto341 child care-->
6		<meta charset = "UTF-8">
7		<link rel="stylesheet" type = "text/css" href="style.css">
8		<title>Child Care HomePage</title>
9	</head>
10	<body>
11	<!-- Main Heading-->
12	<div id = "header">
13	<h1>Welcome to Mama Bear Child Care</h1>
14	</div>
15	<!-- Navigation Area -->
16	<div id = "nav">
17	<ul>
18		<li><a class="active" href="index.html">Home</a></li>
19		<li><a href = "philosophy.html">Our Philosophy</a></li>
20		<li class = "dropdown"><a href="javascript:void(0)" class = "dropbtn">Our Centre</a>
21		<div class = "dropdown-content">
22		<a href="accelerated_programme.html">Mama Bear Accelerated Programme</a>
23		<a href="environment.html">Our Environment</a>
24		<a href="goals.html">Our Goals</a>
25		</div>
26		</li>
27
28
29		<li><a href="childs_day.html">The Childs Day</a></li>
30		<li><a href="settling.html">Settling in</a></li>
31		<li><a href = "staff.html">Our Staff</a></li>
32		
33	</ul>
34	</div>
35
36	<!-- Contact Area -->
37	<div id = "contacts">
38		<h3 id="contact_us">Contact Us</h3>
39		<h4>If you have any questions about the Mama Bear please contact us at:</h4>
40			<ul>
41				<li>enquiries@mamaBear.co.nz</li>
42				<li>123 Salmon Lake Lane</li>
43				<li>Big Bear City</li>
44			</ul>
45	</div>
46	<!-- Main Area -->
47	<div class="content">
48		<h2>Our Philosophy</h2>
49
50		<ul id = "philo_list">
51			<li>We believe in positive respectful partnerships between children, families, caregivers and teachers where we value our community's diversity./li>
52			<li>We aim to support children's learning through a stimulating prepared environment that nurtures and develops dispositions for learning and provides opportunities for success, challenges, individual interests, and freedom of choice.</li>
53			<li></li>
54		</ul>
55
56	</div>
57	<!-- Footer area -->
58	<div id = "footer">
59		<footer>This website was created for a University project.  The content is largely fictional and no services are actually being offered.</footer>
60		
61	</div>
62		
63	</body>
64</html>

HTML
1<!-- Assignment 18 % COMP112 Tomofumi Kimura index page-->
2<!DOCTYPE html>
3<html lang="en">
4	<head>
5	<!-- kimto341 child care-->
6		<meta charset = "UTF-8">
7		<link rel="stylesheet" type = "text/css" href="style.css">
8		<title>Child Care HomePage</title>
9	</head>
10	<body>
11	<!-- Main Heading-->
12	<div id = "header">
13	<h1>Welcome to Mama Bear Child Care</h1>
14	</div>
15	<!-- Navigation Area -->
16	<div id = "nav">
17	<ul>
18		<li><a class="active" href="index.html">Home</a></li>
19		<li><a href = "philosophy.html">Our Philosophy</a></li>
20		<li class = "dropdown"><a href="javascript:void(0)" class = "dropbtn">Our Centre</a>
21		<div class = "dropdown-content">
22		<a href="accelerated_programme.html">Mama Bear Accelerated Programme</a>
23		<a href="environment.html">Our Environment</a>
24		<a href="goals.html">Our Goals</a>
25		</div>
26		</li>
27
28
29		<li><a href="childs_day.html">The Childs Day</a></li>
30		<li><a href="settling.html">Settling in</a></li>
31		<li><a href = "staff.html">Our Staff</a></li>
32		
33	</ul>
34	</div>
35
36	<!-- Contact Area -->
37	<div id = "contacts">
38		<h3 id="contact_us">Contact Us</h3>
39		<h4>If you have any questions about the Mama Bear please contact us at:</h4>
40			<ul>
41				<li>enquiries@mamaBear.co.nz</li>
42				<li>123 Salmon Lake Lane</li>
43				<li>Big Bear City</li>
44			</ul>
45	</div>
46	<!-- Main Area -->
47	<div class="content">
48		
49		<h2>Mama Bear Child Care is a privately run childcare centre</h2>
50
51		<h3>It offers a range of child care and education services inclding: </h3>
52		<ul>
53			<li>Mama Bear Child Care <span>Infant Room</span></li>
54			<li>Mama Bear Child Care <span>Junior Room</span></li>
55			<li>Mama Bear Child Care <span>Accelerated Learning Room</span></li>
56
57		</ul>
58
59		<h3 id = "attention">All programmes employ qualified staff <br>and offer high quality care and education in accordance with the Council of Bears early childhood curriculum.</h3><hr>
60
61
62
63		<h2>Vacancies</h2>
64			<h4>There are currently <span>limited child spaces</span> available in all our programmes.</h4>
65	</div>
66	<!-- Footer area -->
67	<div id = "footer">
68		<footer>This website was created for a University project.  The content is largely fictional and no services are actually being offered.</footer>
69		
70	</div>
71		
72	</body>
73</html>

CSS
1/* COMP112 Assignment 18% tkimura Tomofumi Kimura stylesheet*/ 
2
3body{
4	background-color:rgb(224, 200, 202);
5}
6
7/* main heading*/
8#header h1{
9	background-color:red;
10	text-align: center;
11	width:100%;
12	margin:0px;
13	padding:20px;
14	position:fixed;
15	top:0;
16	left:0;
17	right:0;
18}
19/* Navigation whole area */
20#nav{
21	background-color:rgb(87, 209, 204);
22	position:fixed;
23	top:75px;
24	left:0;
25	right:0;
26	width:100%;
27	margin:0px;
28}
29/* Navigation whole ul ara */
30#nav ul{
31	max-width:100%;
32	list-style-type:none;
33	padding:0;
34	margin-top:0px;
35	margin-left:150px;
36	margin-right:auto;
37	margin-bottom:auto;
38	overflow:hidden;
39	background-color:inherit;
40}
41/* Navigation list area*/
42#nav li{
43	float:left;
44	
45
46}
47
48/* Navigation list link, DropDown menu*/
49#nav li a, .dropbtn{
50	display:block;
51	color:inherit;
52	text-align:center;
53	padding:14px 30px 10px 30px;
54	text-decoration: none;
55
56
57}
58/* when user move the pointer to the place */
59#nav li a:hover, .dropdown:hover .dropbtn{
60	background-color:yellow;
61}
62
63#nav li.dropdown{
64	display:block;
65}
66/* drop down area*/
67.dropdown-content{
68	display:none;
69	position:absolute;
70	background-color:#f9f9f9;
71	min-width:100px;
72	box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
73	z-index: 1;
74}
75/* drop down list element*/
76.dropdown-content a{
77	color:black;
78	padding:12px 16px;
79	text-decoration: none;
80	display:block;
81	text-align:left;
82}
83/* when mouse is over the drop down list element */
84.dropdown-content a:hover{
85	background-color:#f1f1f1;
86}
87
88.dropdown:hover .dropdown-content{
89	display:inline;
90}
91
92/* Contact Us Area*/
93
94#contacts{
95	position:fixed;
96	right:10px;
97	float:right;
98	width:220px;
99	margin-left:20px;
100	border-radius:25px;
101	border:2px solid #73AD21;
102	background-color:yellow;
103	padding:10px;
104}
105#contact_us{
106	color:red;
107}
108
109/* Main Area*/
110.content{
111	margin-top:170px;
112	margin-right:20px;
113	width:1100px;
114
115}
116
117
118/* h2 Mama Bear CHild Care heading */
119.content h2{
120	text-align: center;
121	color:rgb(0, 102,255);
122}
123.content h3{
124	text-align: center;
125
126}
127.content h4{
128	text-align:center;
129
130}
131.content span{
132	color:red;
133}
134#attention{
135	text-align:center;
136	background-color:rgb(153,204,255);
137	border:dotted 2px ;
138	padding-left:-10px;
139	border-radius: 40px;
140}
141
142/* Education Services UList*/
143.content ul{
144	margin:auto;
145	border-radius: 40px;
146	border:2px solid #73AD21;
147	padding:40px;
148	padding-top:10px;
149	width:400px;
150	height:140px;
151	background-color:rgb(153,204,255);
152	list-style-image: url('../Images/list_image/icn_12.gif');
153
154}
155.content li{
156	padding:20px;
157}
158
159/* Footer area*/
160
161#footer{
162	position:absolute;
163	bottom:0;
164	left:0;
165	background-color:rgb(87, 209, 204);
166	color:inherit;
167	margin-top:30px;
168	padding:40px;
169	width:100%;
170	height:20px;
171}

honami

2017/05/15 03:26

#footerをposition: absoluteとしている意図はどこにありますか？また、問題は「<h4>There are currently <span>limited child spaces</span> available in all our programmes</h4>」がfooterの裏側に隠れてしまっていること、という認識で良いですか？

TomofumiKimura

2017/05/15 03:38

質問ありがとうございます。absolute にしないとなぜか、footer のセクションの左側に少しの隙間ができてしまったので、ポゾションをabsoluteにしてleft:0にしたら消えましたので、そうしていたのですが、違うのでしょうか？そうです、なぜかなぜか隠れてしまいます。

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

回答1件

ベストアンサー

問題は.contentがページの終端まで高さを持ってるが、その前面にfooterが重なっているためです。
absoluteは絶対値で配置になるので裏側に何があろうとbodyに対してbottom:0, left:0;を保とうとします。
そのため、.content自身がその絶対位置に可視コンテンツが重ならないようにしなければなりません。

仮にスクロールをしてもfooterが下部に固定されたままにしたい場合

CSS
1.content{
2    margin-top:170px;
3    margin-right:20px;
4    width:1100px;
5
6    //追加
7    height: auto; 
8    padding-bottom: 100px; //フッター分の余白
9    overflow-y: scroll;
10}
11
12#footer{
13    position: fixed; //変更
14    bottom:0;
15    left:0;
16    background-color:rgb(87, 209, 204);
17    color:inherit;
18    margin-top:30px;
19    padding:40px;
20    width:100%;
21    height:20px;
22}
23

footerが下部に固定される必要がない場合

CSS
1#footer{
2    position: relative; //変更
3    background-color:rgb(87, 209, 204);
4    color:inherit;
5    margin-top:30px;
6    padding:40px;
7    width:100%;
8    height:20px;
9}
10

※補足での隙間はbodyによるmarginです。

CSS
1body {
2   margin: 0;
3}

とすれば消えます。

投稿2017/05/15 03:46

編集2017/05/15 03:54

honami

総合スコア308

TomofumiKimura

2017/05/15 03:52

すみません、そうすると、Our Philosophy のページでfooter のセクションが上にきているんですけど

honami

2017/05/15 04:02 編集

philosophy.htmlがどのようなものかを私は知りません。予測できる範囲内で言えばfooterがbody以外を親要素として認識していることです。ソースを追記してください。

TomofumiKimura

2017/05/15 04:10

あ、すいません。今追記しました。

honami

2017/05/15 04:42

追記は先頭ではなく末尾に行うようにしてください。（初めてページを見る人の混乱となります） footerが上にあがる理由は、philosophy.htmlではコンテンツが少なすぎるためです。コンテンツが少なくてもfooterを下部に固定したい場合、bodyに対してmin-height: 100vh;のような制約をかける、などの方法があります。しかし、質問のcssには初歩的な問題が複数含まれています。「bodyとhtmlに対してmargin、width, height等のリセットをかける」や「やみくもに（header内のh1要素などに）position: fixed;を与えるようなことをしない」という処置で改善される問題が多々あります。質問の趣旨と問題が合致しているかを考え、分けられる可能性のある問題は新たに質問するようにしてください。この質問の主な問題は「<h4>There are currently <span>limited child spaces</span> available in all our programmes</h4>」がfooterの裏側に隠れてしまっていること、です。それが解決されているかどうかを明確にしてください。

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