cssでheightを設定しようとすると下にあるはずのfutterが移動してきてしまいます。

cssでheightを設定しようとするとfutterが移動してきてしまう。

heightの『％』表記を変更すればするほどよくわからない形で反映されてどう調べればいいのかよくわからないのでこちらに質問させていただきました。

該当のソースコード

html
1<!CDOCTYPE html>
2  <html>
3  <head>
4    <meta carset="utf-8">
5    <title>ポートフォリオ</title>
6    <link rel="stylesheet" href="../css/story.css">
7  </head>
8  <body>
9<div class="main">
10  <div class="parallax-bg img-bg-01">固定背景１</div>
11  <div class="parallax-bg img-bg-02">固定背景２</div>
12  <div class="parallax-bg img-bg-03">固定背景３</div>
13  <div class="parallax-bg img-bg-04">固定背景４</div>
14  <div class="parallax-bg img-bg-05">固定背景５</div>
15</div>
16    <footer class="footerall">
17      <div class="sns-box">
18      <ul class="sns">
19        <li><a href="https://twitter.com"><img src="../images/twitter.png" width="50px"></a></li>
20        <li><a href="https://www.facebook.com"><img src="../images/facebook.png" width="50px"></a></li>
21        <li><a href="https:/plus.google.com"><img src="../images/line.png" width="50px"></a></li>
22      </ul>
23    </div>
24    </footer>
25  </body>
26  </html>

css
1@caraset "UTF-8";
2
3html {
4	font-famili: sans-serif;
5}
6body {
7	margin: 0;
8	background-color: #EEE;
9}
10.main {
11  height: 100%;
12  margin: 0 auto;
13  letter-spacing: 2px;
14  font-size: 10px;
15}
16.main div {
17  box-sizing: border-box;
18  color: #FFF;
19  font-size: 5rem;
20  display: flex;
21  align-items: center;
22  justify-content: center;
23  height: 30%;
24  padding: 5%;
25}
26.parallax-bg {
27  background-attachment: fixed;
28  background-position: center;
29  background-size: cover;
30  background-repeat: no-repeat;
31}
32.img-bg-01 {
33  background-image: url('../images/card/ex.jpg');
34}
35.img-bg-02 {
36  background-image: url('../images/card/work.jpg');
37}
38.img-bg-03 {
39  background-image: url('../images/card/profile.jpg');
40}
41.img-bg-04 {
42  background-image: url('../images/card/skill.jpg');
43}
44.img-bg-05 {
45  background-image: url('../images/card/story.jpg');
46}
47.footerall {
48	height: 100%;
49	background: linear-gradient(-135deg, #101010, #A6AAA9);
50}
51.sns-box {
52	padding-top: 70vh;
53}
54.sns {
55	text-align: center;
56	width: auto;
57}
58.sns li{
59	width: auto;
60	padding: 10px 3% 10px 3%;
61	line-height: 10px;
62	display: inline-block;
63	list-style-type: none;
64}

cerfweb

2020/11/12 10:14

やろうとされていることが今ひとつよくわからないので、できれば画像か何かで説明を追加してもらえますか。あと、futterというのはfooterのことでしょうか。

umi3

2020/11/12 11:47

すみません、footerのことです。この上のコードを書くと、「固定背景２」の部分になぜかfooterが来てしまうのはなぜかわからなくて。。。

cerfweb

2020/11/12 12:16

AAA.jpg〜EEE.jpgはそれぞれどのくらいのサイズの画像ですか。縦横の寸法を教えてください。

umi3

2020/11/12 12:34

ありがとうございます。画像の大きさは900*420です。

cerfweb

2020/11/12 13:03

ご提示いただいたコードを手元で再現してみましたが、おっしゃっているような現象は見られませんでした。もし可能でしたら、問題の部分のスクリーンショットを見せていただけますか。

umi3

2020/11/12 13:48

今合成して画像を作ったのでちょっとごちゃごちゃしてますが、本当は「固定背景２」の部分に他の画像を入れてまして、このsnsが貼ってある白と黒のグラデーションの部分は「footer」に来るはずなんですが・・・要するに、「固定背景２」にあるはずの本来の画像がなくなって、「footer」の背景とsnsアイコンが代わりに入ってて、本来「footer」があった部分に何もなくなってると行った状態です。。。うまく説明するのが難しいですが、理解いただけたでしょうか・・・？

cerfweb

2020/11/12 14:12

提示されたcss以外に関係しているcss、あとjsなどはありませんか。

umi3

2020/11/12 14:36

他の部分消して見たりしてもその部分は変わらないですね。。。 cerwebさんの方でも同じような症状でしょうか？

cerfweb

2020/11/12 14:39

固定背景2（または他の固定背景の部分）とfooterが重なるという現象が確認できません。

umi3

2020/11/12 14:44

僕だけってことですか・・・ちなみに、１００％を３０％にすると追加した写真の感じになりました