footerをarticleの一番下に配置できません

２カラムレイアウトのarticleの一番下にfooterがくるように指定したいのですが、
うまくできない状況です。

試してみた作業としては、point-wrapperの下に配置されるようにpoint-wrapperからはずしてみましたが、
flex-wrap:wrap指定のため、文言が片側にのみ表示されるなどうまくできません。

下記に現状と完成予想図の骨組みフレームとコードを添付しました。
※2カラムレイアウトですが、現状articleに画像が一つあるのみですが、
今後増えるwrapperのまとまりをすべてarticle内に入れることは可能でしょうか。
またその場合、CSSのarticleと親要素の設定はどのようにしていくべきでしょうか。
合わせて、ご回答いただけると幸いです。
よろしくお願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>●○○○○●○○○○●○○○○</title>
6        <link rel="stylesheet" href="style02.css">
7    </head>
8    <body>
9        <div class="contents wrapper">
10            <div class="container">
11                <aside>
12                    <a href="#"><img class="aside-img" src="●○○○○●○○○○●○○○○">
13                    </a>
14                    <a href="#"><img class="aside-img" src="●○○○○●○○○○●○○○○">
15                    </a>
16                    <a href="#"><img class="aside-img" src="●○○○○●○○○○●○○○○">
17                    </a>
18                    <a href="#"><img class="aside-img" src="●○○○○●○○○○●○○○○">
19                    </a>
20                    <a href="#"><img class="aside-img" src="●○○○○●○○○○●○○○○">
21                    </a>
22                </aside>
23                
24                <article>
25                    <img class="article-img" src="●○○○○●○○○○●○○○○">
26                </article>
27            </div>
28        </div>
29        <div class="point-wrapper">
30            <div class="container">
31            <div class="container-under">
32                <div class="heading">
33                    <h2>●○○○○●○○○○●○○○○</h2>
34                </div>
35                    <div class="points">
36                        <div class="point">
37                            <h3 class="point-h3-1">●○○○○●○○○○●○○○○</h3> <p>●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○</p>
38                            <a>●○○○○●○○○○●○○○○</a>
39                            <img class="hito01" src="●○○○○●○○○○●○○○○">
40                        </div>
41                        <div class="point right">
42                            <h3 class="point-h3-2">●○○○○●○○○○●○○○○</h3> <p>●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○</p>
43                            <a>●○○○○●○○○○●○○○○</a>
44                            <img class="hito02" src="●○○○○●○○○○●○○○○">
45                        </div>
46                        <div class="point left">
47                            <h3 class="point-h3-3">●○○○○●○○○○●○○○○</h3> <p>●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○</p>
48                            <a>●○○○○●○○○○●○○○○</a>
49                            <img class="hito03" src="●○○○○●○○○○●○○○○">
50                        </div>
51                    </div>
52                <footer>
53                    <p><small>&copy; 2020 ●○○○○●○○○○●○○○○</small></p>
54                </footer>
55            </div>
56            </div>
57        </div>
58    </body>
59</html>

CSS
1body {
2    margin: 0;
3    font-family: "Hiragino Mincho ProN";
4}
5a {
6    text-decoration: none;
7}
8.container {
9    width: 1170px;
10    margin: 0 auto;
11    position: relative;
12}
13.container-under {
14    width: 994.5px;
15    margin: 0 auto;
16    position: absolute;
17    right: 0;
18}
19.aside-img {
20    width: 90px;
21    border-bottom: 0.5px solid dimgrey;
22    padding: 30px 0;
23}
24.contents > .container {
25    display: flex;
26    flex-direction: row;
27    align-items:  start;
28}
29aside {
30    display: flex;
31    flex-direction: column;
32    width: 15%;
33    color: dimgrey;
34    letter-spacing: 5px;
35    font-size: 14px;
36}
37article {
38    display: flex;
39    flex-direction: column;
40    width: 85%;
41    color: dimgrey;
42    letter-spacing: 5px;
43    font-size: 14px;
44    background-color: gainsboro;
45}
46.article-img {
47    height: 770px;
48    object-fit: cover;
49}
50.heading h2 {
51    padding: 70px 0 50px 0;
52    font-size: 28px;
53    letter-spacing: 5px;
54    text-align: center;
55}
56.points {
57    flex-wrap: wrap;
58}
59.point {
60    width: 50%;
61    padding-bottom: 200px;
62}
63.point img {
64    width: 180px;
65}
66.point-h3-1 {
67    position: relative;
68}
69.hito01 {
70    position: absolute;
71    top: 170px;
72    left: 680px;
73}
74.right {
75    float: right;
76}
77.hito02 {
78    position: absolute;
79    top: 580px;
80    left: 100px;
81}
82.left {
83    position: absolute;
84    top: 1000px;
85}
86.hito03 {
87    position: absolute;
88    top: -30px;
89    left: 700px;
90}
91footer {
92    height: 65px;
93    background-color: #f2f2f2;
94}
95footer p {
96    padding-top: 23px;
97    letter-spacing: 5px;
98    color: dimgrey;
99    text-align: center;
100    font-size: 12px;
101}
102

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

回答2件

ベストアンサー

position: absolute;を使っての位置決めを多用していますが、それがfooterが上にくる原因ですね。
position: absolute;が設定された要素は、文書の通常のフローから除外され、他の要素からはないものとみなされます。

通常のフローと要素がHTMLで記述した順に左から右、上らか下に順番に配置されることですが、position: absolute;の要素はそれから外れて浮いた状態になります。ですので、その下の要素が上に移動してしまいます。

まずは、position: absolute;による位置決めはやめましょう。
あと、左右配置も float: left; float: right; を使うのをやめましょう。
これも後の要素が回り込んできますので、レイアウトのくずれの原因になります。

上の方の .contents > .container では display: flex; でレイアウトしていますので、それと同様に
point-wrapper > .container も display: flex; でレイアウトを決めるようにすることをお勧めします。

下記辺りを参考に学習してください。

もう迷わない！CSS Flexboxの使い方を徹底解説 | Web Design Trends

CSS Flexbox の基礎知識と使い方をやさしく解説 | コリス

投稿2020/08/12 12:54

編集2020/08/12 12:55

hatena19

総合スコア34075

user20

2020/08/14 15:15

hatena19 様ご回答いただき、ありがとうございました。添付していただいた参考サイトも使用して、学習していきたいと思います。ベストアンサーとさせていただきました。

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

position: absolute;の影響で、親要素の高さが潰れてしまっていることが原因のようです。
まずは、position: absolute;をすべてコメントアウトしてみて、表示を確認してください。

今回のシチュエーションでposition: absolute;を使用するのは適切ではありません。
display: flex;を使用して、
画像を左、テキストを右にしたいときはflex-direction: row-reverse;
画像を右、テキストを左にしたいときはflex-direction: row;
にするとよさそうです。

その際、以下のようにh3、p、aを囲うdivを追加してください。

HTML
1<div class="point left">
2    <!-- h3、p、aを囲うdivを追加 -->
3    <div class="xxxx">
4        <h3 class="point-h3-3">●○○○○●○○○○●○○○○</h3>
5        <p>●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○</p>
6        <a>●○○○○●○○○○●○○○○</a>
7    </div>
8    <img class="hito03" src="●○○○○●○○○○●○○○○">
9</div>

参考URL:
https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction

(たとえば会社の後輩相手なら「今回のシチュエーションでposition: absolute;を使うな」と指示するところですが)
何らかの事情でどうしても、position: absolute;を使用しなければならない場合は、まず.position: relative;を指定する要素が欠けているので「.point」あたりに指定してください。