フッターが正常に表示されない

2カラムレイアウトのホームページです。
フッターが正常に表示されないのですが、どうしたらいいでしょうか。コードは以下のようになります。
ブラウザを縮めたときは正常に表示されますが、サイズを大きくしたときは正常に表示されません。

HTML
1<DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>練習</title>
6    <link rel="stylesheet" href="css/reset.css">
7    <link rel="stylesheet" href="css/slicknav.min.css">
8    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
9    <link rel="stylesheet" href="css/style.css">
10    <meta name="viewport" content="width=device-width, initial-scale=1.0">
11</head>
12    
13<body>
14    <div id="wrapper">
15        <div id="page_top">
16            <a href="#"></a>
17        </div>
18    
19        <header>
20            <a href="index.html"><img src="images/headertest.jpg"></a>
21        </header>
22    
23        <nav>
24            <ul id="menu">
25                <li><a href="index.html">Top</a></li>
26                <li><a href="#">Introduction</a></li>
27                <li><a href="#">Menu</a></li>
28                <li><a href="#">Contact</a></li>
29            </ul>
30        </nav>
31        <div id="main">
32            <article>
33                <h1>ああああ</h1>
34            </article>
35    
36            <aside>
37                <h1>いいいい</h1>
38                <img src="images/headertest.jpg">
39                <img src="images/bannertext.jpg">
40            </aside>
41        </div>
42        <footer>
43            <p>うううう</p>
44        </footer>
45    </div>
46    
47    
48    <script src="js/jquery-3.4.1.min.js"></script>
49    <script src="js/jquery.slicknav.min.js"></script>
50    <script src="js/script.js"></script>
51</body>
52</html>
53</DOCTYPE>

CSS
1@charset "utf-8";
2
3* {
4    margin: 0;
5    padding: 0;
6}
7
8#wrapper{
9    width: 100%;
10    background-color: black;
11    overflow: hidden;
12}
13/*ページの上に戻るボタン*/
14#page_top{
15  width: 80px;
16  height: 80px;
17  position: fixed;
18  right: 0;
19  bottom: 0;
20  opacity: 0.6;
21}
22#page_top a{
23  width: 80px;
24  height: 80px;
25  text-decoration: none;
26}
27#page_top a::before{
28  font-family: 'Font Awesome 5 Free';
29  font-weight: 700;
30  content: '\f139';
31  font-size: 60px;
32  color: #00c8c8;
33}
34@media screen and (max-width: 750px) {
35    #page_top{
36        width: 80px;
37        height: 80px;
38        position: fixed;
39        right: 0;
40        bottom: 0;
41        opacity: 0.6;
42    }
43}
44
45/* ヘッダー */
46header {
47    width: 960px;
48    background-color: antiquewhite;
49    margin: 0 auto 0 auto;
50}
51header img {
52}
53@media screen and (max-width: 750px) {
54    header img {
55        width: 0;
56        height: 0;
57    }
58}
59
60/* ナビゲーションエリアの設定 */
61nav {
62    text-align: center;
63    width: 960px;
64    background-color: azure;
65    margin: 0 auto 0 auto;
66}
67nav ul li {
68    list-style: none;
69    display: inline-block;
70}
71nav ul li a {
72    text-align: center;
73    text-decoration: none;
74    width: 130px;
75    line-height: 70px;
76    overflow: hidden;
77    font-size: 24px;
78    font-weight:bold;
79    color: black;
80    background-color: aqua;
81}
82#menu {
83    display: none;
84}
85nav ul li a:hover {
86    background-color: black;
87    color: white;
88}
89
90@media screen and (min-width: 750px) {
91    #menu {
92        display: block;
93    }
94    .slicknav_menu {
95        display: none;
96    }
97}
98.slicknav_menu:before {
99    width: 180px;
100    height: 50px;
101    float: left;
102    background-image: ;
103    background-repeat: no-repeat;
104    background-position: center left;
105    background-size: 100%;
106    content: "";
107    margin: 0 0 0 19px;
108}
109.slicknav_menu {
110    width: 100%;
111    position:absolute;
112    top: 0;
113    width: 100%;
114    z-index: 10000;
115    background-color: #280000;
116}
117
118/* 本文 */
119#main {
120    width: 960px;
121    margin: 0 auto 0 auto;
122    overflow: hidden;
123}
124article {
125    width: 760px;
126    background-color: beige;
127    padding: 0 0 1000px 0;
128    float: left;
129}
130article h1 {
131    font-size: 100px;
132}
133@media screen and (max-width: 750px) {
134    article {
135        width: 100%;
136        margin: 60px 0 0 0;
137    }
138}
139
140/* aside */
141aside {
142    width: 200px;
143    background-color: blanchedalmond;
144    margin: 0;
145    float: right;
146}
147aside img {
148    display: inline-block;
149    width: 200px;
150}
151@media screen and (max-width: 750px) {
152    aside {
153        width: 100%;
154    }
155    aside img {
156        width: 27%;
157}
158
159/* footer */
160footer {
161    clear: both;
162    width: 960px;
163    margin: 0 auto;
164    background-color: white;
165}
166footer p {
167    font-size: 60px;
168}
169

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

回答1件

ベストアンサー

aside関係のメディアクエリ部分が閉じられていないため、footer関係もその中に入ってしまっているのが原因だと思います。

css
1@media screen and (max-width: 750px) {
2  aside {
3    width: 100%;
4  }
5
6  aside img {
7    width: 27%;
8  }
9}/* これが無い */
10

また、DOCTYPEは<!DOCTYPE html>で初めに!が入り、さらに言うと終了タグ（</DOCTYPE>）は不要です。

投稿2019/11/26 23:41

dit.

総合スコア3235

sunred7083

2019/11/27 00:07

またこのミスをやってしまったようです。ご回答ありがとうございました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

フッターが正常に表示されない

関連した質問